Today, I’d like to go over the wonderful world of rollover images. Many people have been using Javascript for the sake of giving the rollover effect. But, since some people might have Javascript disabled on their browsers, I don’t like relying on Javascript too much for my website layouts.
Here is the Javascript code that I am talking about if you really, really want to use Javascript.
Javascript/HTML Version
The Code:
<script language="JavaScript">
imageRoll = new Array()
imageRoll[0] = new Image(100,150)
imageRoll[0].src=”your_image.gif”
imageRoll[1] = new Image(100,150)
imageRoll[1].src=”your_rollover_image.gif”
function rollOver(){
document.[image_name].src = imageRoll[1].src;
return true;
}
function rollOut(){
document.[image_name].src = imageRoll[0].src;
return true;
}
</script>
<body>
<a href=”http://www.[some_url].com/”
onmouseover=”rollOver()”
onmouseout=”rollOut()”>
<img src=”[your_image].jpg”
name=”[image_name]”
width=100
height=150
border=0>
</a>
</body>
Explanation:
Just replace whatever are in brackets, [], with the names that you are using.
The only good thing about Javascript is that they work in most browsers. The downside is, as I as said before, some people may have Javascript disabled.
CSS Version
Now then, enough of Javascript. On to the CSS stuff.
I’ll be using my home image link as an example for this discussion.
Notice my home image. The image should be the original image and the rolled over image as one.
First, define your div width. This should be the size of half your image. In my case, it’s 62 pixels.
The CSS:
#home
{
width:62px;
}
Next, define the style of the <a></a> tags:
#home a
{
text-indent:-1000em;
background:url(images/home.jpg) no-repeat left top;
width:62px;
height:32px;
display:block;
overflow:hidden;
}
Explanation:
Basically, what this does is sets the background of the link to whatever image you are using. overflow:hidden hides the other half of the image.
Now for the rollover part:
#maincontainer #header #navbar #home a:hover
{
background-position: -62px 0px;
}
Explanation:
What this does is it shifts the background image to the right by 62 pixels. If it were a positive 62px, then it would shift it over to the left. The second pixel number is for up and down.
Now all that’s left is to create the div:
<html>
<a href="home.html"></a>
</html>
This is what it looks like at this point:
Now, this alone should work properly in all the browsers, including IE6. However, in IE6 there is a slight flicker whenever the image changes. If you don’t mind the flicker, then just ignore the next few steps of this tutorial.
To fix this flicker in IE6, you need to have a special set of CSS for IE6. Here comes more “hacking.”
After the last part in the CSS, we need to add a little bit more CSS.
Add this:
*html #home a
{
background:none;
text-indent:0px;
}
*html #home a:hover
{
display:block;
text-indent:-62px;
}
Explanation:
*html is something that only IE6 and lower recognize. Thus, anything containing this is only rendered in IE6…or lower.
Anyway, we need to first change the background of the <a></a> tags to none and then change the text-indent to 0. Text-indent was there initially just so that anything within the link is basically NOT displayed. You can take it out if you really want to.
Next, we give the hover attribute at text-indent half the size of the image, but in the reverse direction. Remember, I want to shift the image to the right, since the blue part is on the right half of the image.
Lastly, we need to add the image inside the link in the html.
HTML:
<div id="home">
<a href="home.html"><img src="images/home.jpg"></a>
</div>
That’s it. It looks long and maybe be unnecessary, but if your a perfectionist like me, that flickering would just wear you out everytime you see it.
This is what it looks like now:
If you can, look at this page using IE6 and mouseOver the former and latter home button links. See if you can see the difference.
Here’s the whole thing put together:
<script type=’text/css’>
#home
{
width:62px;
}
#home a
{
text-indent:-1000em;
background:url(images/home.jpg) no-repeat left top;
width:62px;
height:32px;
display:block;
overflow:hidden;
}
#home a:hover
{
background-position: -62px 0px;
}
/* For IE6
*html #home a
{
background:none;
text-indent:0px;
}
*html #home a:hover
{
display:block;
text-indent:-62px;
}
</script>
<html>
<body>
<div id=”home”>
<a href=”home.html”><img src=”images/home.jpg”></a>
</div>
</body>
</html>
RSS feed for comments on this post
