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.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 .
Please link to me
If you find this post useful, please show your support by linking to this article. Simply copy and past the text below into your blog/website :
Related Posts
- Interesting and Funny Images Taken From My E71 Phone I seldom take pictures using my E71 phone, but when I do I make sure it is either an interesting...
- Kodak Z18 Believe it or not the Kodak Z18 is actually the Kodak Zi8. It is not Zee eighteen but Zee i...
- Unique Facebook Username Rush! Image via Wikipedia You can now get your unique facebook username. If you have a facebook account, you probably notice...
- 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....
- Do You Need a Hunch? Image via CrunchBase Do you need a hunch? Do you need someone's advice on something but no one is around?...
Related Websites
- Network Marketing - Are you Taking Massive Action? (function() {var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];s.type = 'text/javascript';s.async = true;s.src = 'http://widgets.digg.com/buttons.js';s1.parentNode.insertBefore(s, s1);})(); 3Digg Digg (function() {var s...
- Getting Smart About Corporate Blogging - Part Three The first two part of this series discussed a semi-recent post made by Matt Cutts, that covered a few things...
- Two Killer Ways To Make Video's For Your Marketing Without Any Equipment (function() {var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];s.type = 'text/javascript';s.async = true;s.src = 'http://widgets.digg.com/buttons.js';s1.parentNode.insertBefore(s, s1);})(); 2Digg Digg Many people are...
- Network Marketing - Baby Boomers Take Center Stage (function() {var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];s.type = 'text/javascript';s.async = true;s.src = 'http://widgets.digg.com/buttons.js';s1.parentNode.insertBefore(s, s1);})(); 7Digg Digg (function() {var s...
- How To Create A Custom Notebook Using Microsoft Word 2007 Next is to make the cover page and the back page. I'm going to make a cover page with background...
