Not sure about simpler, but there are other ways to produce rollover effects with CSS.
Can't say i use a:hover img....
I always use backgrounds for rollover effects....
Example...
Code:
.myclass
{
background-image:url('myimage.jpg');
background-position:0 0;
}
.myclass:hover
{
background-position:0 20px;
}
.myclass a
{
do whatever you want with the links here
}
You have 1 image, where the image is different as you move down or up vertically, then you simply change the background position on hover...
My class could be a LI element or whatever else....
Can't say if that's XHTML valid, but i've been coding CSS in stylish for so long now i tend to do whatever is easiest (and as long as it works in Firefox/Stylish)..... hehehe...
Of course you could change the image on hover as appose to changing the position, the possibilities are quite numerous....
You could also do something like this...
Code:
<div class="about_nav">
<a href="about.html"><img class="thislink" src="images/buttons/transparent_pixel.gif" alt="About" border="0" width="width you want" height="height you want" /></a></div>
Where transparent_pixel.gif is a 1 pixel transparent gif... usually known as spacer.gif for me (Fireworks creates one by default when exporting images with HTML - i've used that name whenever i need a transparent pixel ever since)
Code:
.about_nav .thislink
{
background-image:url('image.jpg');
}
.about_nav .thislink:hover
{
background-image:url('image2.jpg');
}
Really depends on how it's being used and what you want to archieve... though as said, lots of ways to do it...
