Long lists of Rollovers
There are countless examples of how to create rollovers some are great and some are damn awfull! Many of the good examples aren't scaleable and when you need to handle many rollovers is can be a pain to maintian as well as effect accessability. Here's an example to answer these issues.
A couple of examples that I always link people to are on wellstyled.com and AListApart.com. These both use the background-image: and background-position: CSS properties. This leaves the developer having to have many CSS entries if there are a number of dynamic rollover effects on, for example, a gallery page. Using a similar technique it's possible to use HTML to define the images and a some common CSS to handle the rollover for long lists of images as a Gallery.
The image
The HTML
The CSS
a {
display:block;
width:100px;
height:50px;
position:relative;
overflow:hidden;
}
a img {
position:absolute;
top:0px;
left:0px;
border:0px;
}
a:hover img {
left:-100px;
}
a:hover {
border:0px;
}
Using block elements and the position of the image you can create the same effect. I needed to add a:hover { /* change some css value*/ } to force it to reload the area.
The Demo
The Use
Of casue it's still more effective to use the background-image effect of navigation as the accessibility benefits with the textNode for the naigation far outweights any need to use images. This example really should only be used for galleries and where you can't use the browsers built in effects to handle the rollover.