This is a pure CSS image rollover that works for image tags. Remember how you used to do them with javascript? Onmouseover() and all that jazz? You can stop now.
I was working on a redesign, and being that I'm partial to using image tags for navigation rather than crazy new-fangled image replacement techniques (pharner and etc), I was thinking of an easy way to do an image rollover effect. The solution came to me in about 2 seconds, and I'm not sure if it has been mentioned before, so I figured I would share it with you here.
The premise is simple: Enclose the image in a block level element with a defined size, and then change the positioning of the image when that block level element is hovered over, much like you would change the background positioning for background rollovers. The implementation is simple too.
Here's the setup:
<a href="#"><img src="/directory/hoverex.png" alt="redesign imminent" /></a>
And here's the image that I'm using:
The left half of the image is what I want to display, and the right half of the image is what I want to show on hover. It's 200 pixels wide and 50 pixels high, so the CSS to make the technique work is:
a {
display:block;
height:50px;
width:100px;
overflow:hidden;
}
a:hover {
display:block;
text-indent:-100px;
}
So I make the <a> tag a block level element and give it a height equal to the image and a width equal to half the image, and I apply overflow:hidden so you can't see the other half, and then in the :hover all I have to do is set the text-indent to half the image width so the image moves left and you can see the other half. That's it.
Here's an example of the technique in action:
Browser compatibility:
- IE 5.5+
- Firefox 1.07+
- Opera 7.23+
- Mozilla 1.7.12+
- Netscape 6.02+
- Safari 2.0+
- Konqueror 3.4.3+
Problems with this technique: When the image degrades to alt text, the text will move left on hover, and probably dissappear. Not a complete usability problem, but a problem nonetheless. If you would prefer the javascript route, check out unobtrusive javascript image rollovers. Keep in mind, though, that the javascript technique requires image preloading to prevent a delay, and uses two images, whereas the CSS technique needs only 1 image to load.
Update: I'm going to dub this "MIR" (montoya image rollover) now before it takes off.
Update 2: If you are trying to get this to work inside of tables with IE6, try Eduardo Ojeda's advice:
I found a workaround for using this inside tables on IE6. For some strange reason (i’m no CSS guru, not by far) if you define a border for a:hover, the hack starts working. You just need to make the border the same color as the background. A 0px border won’t work, and ‘none’ or ‘hidden’ don’t seem to do the trick either. Also, the image moves one pixel down and right, so you need to offset that too somewhere if you don’t like the effect… This would be the code: a.rollover {display:block; height:25px; width:25px; overflow:hidden} a.rollover:hover {display:block; text-indent:-25px; border: 1px white solid}
Hope that helps.