Rollover effect with non-equal images - html

Question

In my website, I am trying to get the rollover effects working.
Currently, on no mouse hover, the ul li item is displayed as text but on mouse hover, it has a rollover effect to show the image.
Instead of having text in the normal mouse non-hover state, I want to have images.
That means, mouse hover and non-mouse hover are both different images, and there's no text
I wanted to ask how do I get such a rollover effect working, in contrast to what I have currently. (non-mouse hover is text which I want to to change to images as well)
Here is the jsfiddle of how I currently have rollovers: http://jsfiddle.net/PF35v/7/

Answer 1

You have all of the images hidden by default so when you put an image inside the a tag, it is also hidden.
ul#nav li a img { display: block; }
This will make the images in links always visible but the others hidden by default. I think that's what you're asking for.

Answer 2

Here's two different approaches, I'm sure there are others:
HTML-Centric
<ul id="nav">
<li>
<a href="#">
<span>My Text</span>
<img src="http://goo.gl/tYsDU"/>
<img class="hover" src="http://goo.gl/UohAz"/>
</a>
</li>
...
</ul>
#nav,
#nav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li a img {
display: inline;
}
#nav li a img.hover,
#nav li a span {
display: none;
}
#nav li a:hover img {
display: none;
}
#nav li a:hover img.hover {
display: inline;
}
http://jsfiddle.net/RdRcj/1
CSS-Centric
<ul id="nav">
<li>
</li>
...
</ul>
#nav,
#nav li {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 128px;
height: 128px;
background-image: url(http://goo.gl/tYsDU);
}
#nav li a {
display: block;
width: 128px;
height: 128px;
padding: 0;
}
#nav li a:hover {
background-image: url(http://goo.gl/UohAz);
}
http://jsfiddle.net/RdRcj/
The first is probably the "best" from a flexibility standpoint; you don't have to hard-bake the dimensions in like you do the second. However, if they're unchanging, perhaps the second is preferable for your approach, it just takes targeting each li and a specifically, which can prove a little brittle.