Pages: [1]
  Print  
Author Topic: Using the header: showing the current map.  (Read 1376 times)
rork
Guest
« on: November 04, 2010, 12:44:23 pm »

'When I browse for skin it often occurs to me that many skins have a large image as header. Which is nice because these headers live up the website, however such a header should fit the page showing an appropriate image. But a header doesn't just have to show a nice image, it can also be used to give extra information like on my site for the XOL UT Server. I've added a big image of a map to the header but this image started to bore me soon enough. Initially I started to rotate the image, so it showed a new map each month or so. This however was extra work and no real stimulation to make new screenshots which resulted in the same few images being rotated.

There's another item in that header though: a small box which shows the current activity on the server. This lead to a better use of the image: it's now an image of the map that's being played. I've build this primarily in javascript and will show how it's done.

The header is a table of 1 row and 1 column containing a block with the server information.


<table border = 0>
  <tr>
    <td class = "header">
      <div class = "serverinfo">XOL DOG 400s Fun Server</div>
    </td>
  </tr>
</table>


The server information is requested using AJAX where javascript gets information from a php script that queries the server. The script also checks whether an image for the map exists and return an array with the information. At the end it activates the subroutine which will update the page.


servers[0]=new Array();
servers[0][0]='CTF Fun Server';
servers[0][1]='81.169.188.18';
servers[0][2]='7777';
servers[0][3]='CTF-EpicBoy';
servers[0][4]='0';
servers[0][5]='24';
servers[0][7]=1;
servers[0][6]='';

_AjaxHandle();


The function _AjaxHandle() does two things it creates the html of the serverinfo and updates it using the innerHTML method. And it updates the background image of the header by changing document.pageheader.style.backgroundimage.


var element = document.getElementById("serverinfo");
if (element) {
  var html = "<b>XOL DOG 400s CTF Fun Server.<br>"
  html += "IP</b>: 81.169.188.18:7777<br>";
  html += "<B>Now playing:</B> " + servers[0][3] + "<br>";
  html += "<B>Players: " + servers[0][4] + "/" + servers[0][5];
  element.innerHTML = html;

  var map = servers[0][3];
  if (servers[0][7]) {
    document.getElementById("pageheader").style.backgroundImage =
      "url(\'http://www.rork.nl/img/utmaps/1024x160/" + map + ".jpg\')";
  }
}


A package with the complete scripts and a few map images is available here.'
Logged
Pages: [1]
  Print  
 
Jump to: