While I was creating my 2nd WordPress theme (still in the works…) I thought of using rotating image headers. I first saw this idea from Chris Pearson of www.pearsonified.com in his ‘Simple Random Header Images for Your Blog‘ post. In his post, he showed his technique on how to do this which I am going to show you below:

<img 
src="http://images/image<?php echo(rand(1,5)); ?>.jpg"
width="image_width" height="image_height"
alt="image_alt_text" />

If you check the text in blue above, you can see that the trick is in the php code where it generates a number from 1 to 5 and appends it to the name of the image. So that means you would have to name your images with the same prefix (for example ‘image’) and append it with the randomly generated number for this to work. And that’s all there is to it.

Problem with this is performance. If you are quite acquainted with web programming, you would know that this technique would have to load each image, only when it is asked for it. Meaning rotating of the images would take a lot of time at first.

To solve this, I would be showing you how to use CSS Sprites to fix the performance problem while still having rotating header images. My way of creating rotating image headers involves combining the CSS Image Replacement technique and the CSS Sprites technique.

First, you would have to define this in your HTML code as such:

<div id=”rotator”>
<h1 class=”rotating-image<?php echo(rand(1,5)); ?>”>
Rotating Image
</h1>
</div>

Notice that the php trick is still there. However, what we are randomizing is the class name and not the name of the image itself. Next step is to define the class in our CSS file:

div#rotator{
margin: 10px;
float:left;
text-indent:-9999px;
}

h1.rotating-image1{
background:url(images/rotating-image.jpg) no-repeat;
width:800px;
height:180px;
background-position: 0 0;
}

h1.rotating-image2{
background:url(images/rotating-image.jpg) no-repeat;
width:800px;
height:180px;
background-position: 0 -181px;
}

h1.rotating-image3{
background:url(images/rotating-image.jpg) no-repeat;
width:800px;
height:180px;
background-position: 0 -360px;
}

h1.rotating-image4{
background:url(images/rotating-image.jpg) no-repeat;
width:800px;
height:180px;
background-position: 0 -540px;;
}

h1.rotating-image5{
background:url(images/rotating-image.jpg) no-repeat;
width:800px;
height:180px;
background-position: 0 -720px;
}

The div property ‘text-indent: -9999px’ is to make sure that the text of the h1 tag won’t be shown and would appear invisible since it is thrown of the screen.

Also, as you can see we have 5 different h1 classes for the different images we want to show in the header. If you notice, their codes are very similar except for the background-position property which depends on the position of the image in the master image. This would not make any sense to you if do not know anything about CSS Sprites. So if you want to learn more about CSS Sprites, you can check this out:

CSS Sprites
CSS Sprites Videocast

And that’s it! You now would have rotating image headers whenever the user refreshes his browser or goes to another page (assuming you are using this technique in all your pages…).

Make sure to check out the site for more related information about Simple Rotating Headers Using CSS Sprites and CSS Image Replacement .

Related Posts

• How to Convert Videos for Use in Ipods Without Using 3rd Party Software I'm not sure if this post will be helpful (I'm a noob with Apple software...) but here is a little...
• North Dakota Jobs Looking for work? Laid-off due to the bad economy? Are you desperately looking for a job? Well, there is always...
• Download Free E71 Games! Update: Added more downloadable games here: http://www.phawville.com/blog/mobile24-e71-games-review/ It is quite hard to find free e71 games for download in the internet....
• Kodak Z18 Believe it or not the Kodak Z18 is actually the Kodak Zi8. It is not Zee eighteen but Zee i...
• California Garage Sale When in need of quick cash, one of the most popular ways to raise money is by having a garage...

Related Websites

• HUGO by Hugo Boss for Men 5 oz /150 ML Eau de Toilette Spray User Reviews Send this to a friend HUGO by Hugo Boss for Men 5 oz /150 ML Eau de Toilette...
• Fallene Cotz SPF 58 Water Resistant UVB/UVA Sunscreen for Sensitive Skin, 2.5-Ounce Tube User Reviews Send this to a friend Fallene Cotz SPF 58 Water Resistant UVB/UVA Sunscreen for Sensitive Skin, 2.5-Ounce Tube...
• Thematic: How To Replace Blog Title With A Thematic Header Image Hi friends and welcome to another series of my basic tutorials for adding a thematic header image.  Now that you...
• WordPress Fans: How to load your theme Faster! One of my readers asked me: "I like my theme BUT it takes forever to load in my browser; what...
• SEO Tips In Relation To Image Optimization Incorporating pictures into a web site has been done since the start of the internet. However to do it in...

Filed under: How To, Knowledge, Technology, Tips by Phaw