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 .

• How to Host Multiple Domains in One Web Host Image via Wikipedia So you want to create multiple websites, you have one shared web hosting plan and dozens of...
• 2nd Phawville Design Here is my 2nd WP design. I know it's not that good but hey a learned a lot while creating...
• ASCII Art Looking for some ASCII Art? Well, you have one example above. But what is ASCII Art? In layman's terms, ASCII...
• Interview With The Financial Intelligence Expert Image via Wikipedia I often read books in finance and investing. You may probably have heard of Robert Kiyosaki and...
• Tips on Getting Your First Credit Card Image via Wikipedia Do you want to get a credit card? If you do not know how to manage your...

• Diagnosing And Troubleshooting Computer Hardware What is Hardware?Are these terms familiar to you? Monitor, RAM, CD drive, CPU, graphic cards are all hardware, or more...
• Starving for an Image - The Issue of Super Skinny Models The fashion industry is more than just selling clothes; it’s about selling an image. A large part of that image...
• How to: Protect your email from Spam Bots in Blogs, Social Sites, Forums and Websites A spambot is a web crawler program designed to crawl and search for a website and collect the email address...
• Import Prosper.com Listing, Loan, Group, Member Data into Microsoft Sql Server 2000 Prosper.com makes all publicly available data accessible via a data export.  They also provide tools for importing that data into...
• Wordpress as a Website: 4 Great Reasons When you think of Wordpress you probably think of blogging. That's how most people use it. They sign up for...

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