How to set CSS for navigation using images with rollover state

[JackAndrews]

I am creating a site navigation using images, not live text hyperlinks. Is it possible to style CSS selectors for a:link, a:hover, a:visited, etc without using background images in a div? In other words, the img is placed in a div and is clickable, has a rollover state, etc.

[svidgen]

Why not wrap your images in a link (a) tags? It's the best way to ensure cross-browser compatibility when using the modifiers you wish to use. You can also sort of pass the :hover state down like so:
a img {
/* "normal" CSS for the image */
}

a:hover img {
/* :hover CSS for the image */
}
This is a really nice technique if you want to apply or remove/alter some transparency to/from an image for the rollover. If you want to actually change the image with CSS, it needs to be set as a background somewhere. But, that's also easy enough to do with a link.

Does that help?

[JackAndrews]

Yes, thank you. So, the css would be something like:

a:hover img { url(images/hoverimage.gif); }

?

[svidgen]

Not exactly. You can change any styling features you want for the image, but not the URL itself. Because of this, most folks will change the background of the link itself:
a {
/* set a fixed width and height here */
background: url(someimage.jpg);
}
a:hover {
background: url(otherimage.jpg);
}
However, you could probably also get away with doing something like this:
a img.normal {
display: inline;
}
a:hover img.normal {
display: none;
}
a img.hovering {
display: none;
}
a:hover img.hovering {
display: inline;
}
</style>

... html stuff ...

<a href="http://thepointless.com" title="seriously, where else would you be linking to?">
<img class='normal' src='someimage.jpg' />
<img class='hovering' src='otherimage.jpg' />
</a>
Make sense?

[JackAndrews]

I suppose the answer to my original question is 'no', but maybe this is what I was looking for. Can you explain these two, ie, the difference in the two styles and why I would need both?

a:hover img.normal {
display: none;
}
a img.hovering {
display: none;

[svidgen]

Sure. These are both necessary given the fact that we're dealing with showing and hiding two completely separate images. So, when the mouse is NOT over the link, we want the hover image to be hidden, hence:
a img.hovering {
display: none;
}
And when the mouse IS over the link, we want the normal/non-hover image to be hidden. Hence,
a:hover img.normal {
display: none;
}
So, these two sets of attributes are here to hide the image we do NOT want to see at each state.

Keep in mind, I haven't tested this specific idea. I have used background image swaps in the past. But, I'm fairly confident this will work just as well if you're against setting an explicit size for the link and swapping its background image.

Is that a helpful way to think of it?

[JackAndrews]

I'll give it a try. Thanks much.
Jack