*A fair amount of CSS is involved in this method, but the key aspect is that all image references are in the markup, providing flexibility for image-rollover-intensive sites.
The long popular javascript image rollover has gone out of style. CSS-styled links with pseudo-classes and changing background images have taken their place.
This new method works great for menu items that all have the same image, but for a group of image links, each with a unique over image and “out” image, the pseudo-class/background-image method is almost as inefficient as the old javascript method.
The Mostly Markup image rollover method detailed below is ideal for sites that have a high number of unique image rollovers. The method was inspired by a CSS-only popup tutorial. Fundamentally, the rollover functions like an image link. But instead of one img tag wrapped in an anchor link tag, two images are wrapped inside the link. And, if it suits your fancy, you can stick some text in there as well.
See the Demo
The Markup
<a xhref=”somelink” mce_href=”somelink” class=”rollover”>
<img xsrc=”img1.jpg” mce_src=”img1.jpg” alt=”Img2″ width=”60″ height=”60″ border=”0″ />
<img xsrc=”img1_over.jpg” mce_src=”img1_over.jpg” alt=”Img2_over” class=”over” />
<span>Google</span>
</a>
The CSS
The “over” image must be stacked on top of the “out” image and visible only on hover, so we give it position:absolute; visibility:hidden; and z-index:100.
a.rollover .over {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
z-index: 100;
}
a.rollover:hover .over {
visibility: visible;
}
If the parent of an absolutely positioned element is relatively positioned, the child’s starting position (top:0; left:0) will be at the top right of the parent rather than at the top right of the page.
a.rollover {
position: relative;
}
And that should be it, right? But wait, why isn’t it working in IE? Because the link doesn’t have border-width:0 yet, of course! This is one of those bug fixes I don’t even try to understand. And while we’re fixing bugs, I might as well mention that IE 5.01 doesn’t like an absolutely positioned image getting in the way of its link, so to send your browser-challenged users where you want them to go, you’ll have to put an onclick=”window.location=’somelink’” on the over image. And you might as well give the image a cursor:hand to make it look realistic.
a.rollover:hover {
border-width: 0; /* IE */
}
a.rollover .over {
cursor:hand;
}
Now to make life easier for everyone, slap some text on there (inside a span after the over image). This way text updates don’t need to be made with Photoshop. Style and position text to your heart’s content.
a.rollover span {
position:absolute;
left:5px;
top:45px;
z-index:1000;
}
a.rollover {
text-decoration:none;
font-weight:bold;
font-size:11px;
color:#ff0000;
}
a.rollover:hover {
color:#ffffff;
}
