[vidyaishaya]

I have a client that wants images with links.
No problem.

But... we want to have the image change as the mouse rolls over it. And then click on the "mouseover-ed" image to go to the next page.

(I know... it's not what I'd choose, but the client wants it....)

I can do something like this with text (although the text stays
the same on the mouseover) using borders and background.

But how can I do this with CSS?

I know I need to use an id for:
#nav a:link, #nav a:visited

and a different one for:
#nav a:hover

but how does a different image get specified on the mouse-over?

In the HTML itself? Or in the CSS? Or where?

I'm confused.

Thanks

....Vidya Ishaya

[tsunam]

You can do it in the css, as you would define a background in css you can do that with the a:hover.

something like

background: url("background_top.png");

[vidyaishaya]

Yes, I thought of that, but then a big question comes up.

How does that background graphic become a link?
As the HREF is specified in the HTML, and it
must have something to be attached to, like
<a href="xyz.htm"><img src="abc.jpg"></a>

How would you link something which is a background
in a CSS tag?

See? That's the problem here?

Thanks

...Vidya

[tsunam]

well you have a couple of options. You can do a

<div links>
<li> this is link one</li>

and have it be a invisible text link, the exact size of the graphic. That'd probably be the easiest. the css would cover the div's invisible text.

[Shadow2531]

Do you want something like this?

(that's pure css and won't work in iE)

If you need it to work in IE, you'll have to use a javascript method.

[vidyaishaya]

OK, thanks much.

Do you think IE will ever support pure CSS?

...Vidya

[tsunam]

Nope....they said they won't support full CSS2 in ie 7 because it's not a great standard. They will impliment more of it but not full support. They claim they'll give full support in either 2.1 or 3 but thats a load of bull.

[Shadow2531]

You can however run IE7 on the site in question to include javascript and css hacks that allow pure css things like that to work.

I'm not suggesting you do that, just letting you know that there's a way.

Also, you can use a proxy with IE to include IE7 locally so when you visit pages in IE, pure css stuff will automatically work.

Again though, it's not worth it.

(The IE7 I am referring to is the collection of hacks for IE6 and not the next version of IE that will be available for WinXP SP2 and up)