Random Header Images without Javascript
Many blogs use random header images in their header so that every time a page is reloaded, a new image appears in the header of the site. This adds interest and variation for readers.
To accomplish this, most sites use a combination of CSS and Javascript. Rob Griffith at The Robservatory relates how he set up his family’s site to have rotating header images without using any Javascript. His method involves
- making a minor change to the CSS that calls the header image
- creating a folder specifically for header images
- naming the images sequentially (i.e. header1.jpg, header2.jpg)
- and adding a few lines to header.php.
Random header images for WordPress>>
Category: Tips
For the purposes of this example, we’re going to use 5 different images to pull off our random header effect. It’s important that these images be the same size — this will keep your image declarations consistent and W3C-valid. So, grab the five header images of your choice, and name them according to the following convention:
header_1.jpgheader_2.jpgheader_3.jpgheader_4.jpgheader_5.jpgThe code is
<img src=”http://path_to_images/header_<?php echo(rand(1,5)); ?>.jpg” width=”image_width” height=”image_height” alt=”image_alt_text” />
Thanks siddiq that’s a real useful piece of code!