Rollover question

[wandoledzep]

Hey all,

I'm familiar with CSS rollover techniques with background images (changing margins using the :hover function) but I need to use a similar technique using images coded in the HTML markup. This is because I have four images that act as content (not presentation) in which I need to specify alt tags (for crawlers). Is there a similar technique to the background-image / margin swapping technique for applying rollovers to images encoded in the HTML markup??

Thanks for any help-
wandoledzep

[DDD]

I am not sure I understand your question. But look into Jquery and maybe you can find something you need. DO you have a example you can post of what you are referring to?

[redelite]

^ I think he's saying instead of using anchors and swapping the background position on hover, he's wondering if he can use <img /> tags.

[wandoledzep]

redelite-you're exactly correct. Can I use a pure-CSS technique to swap out image rollovers NOT using the background-image / :hover technique?? I need to include images in my HTML markup that I need to apply rollovers to.

[DDD]

you will need JS for that. But it can be done.

[DDD]

My King Fu is really weak but something along this line? But I think Jquery would be a better bet.


<a href="" onMouseOver="document.YourImage.src='secondImage.gif';" onMouseOut="document.YourImage.src='firstImage.gif';">
<img src="firstImage.gif" name="YourImage">
</a>

[Templarian]

<img onMouseOver="this.src='secondImage.gif';" onMouseOut="this.src='firstImage.gif';" src="firstImage.gif" name="YourImage" />

[wandoledzep]

Cool. Thanks for the responses. I wanted to stick with pure-CSS but I guess I can use a little JS.