Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ What is best way to mouseover link to change an image?

Posted by: whistler Jan 10 2011, 12:08 PM

I am building a webpage with one image and 10 links beside it. I would the mouseover for each link to change the image to one that corresponds with the particular link. I have read many suggestions for doing this, including CSS, javascript but each method seems to produce an unwieldy amount of code, and the javascript method causes link flickering.

What is the best method and where would I find and example?

Posted by: Darin McGrew Jan 10 2011, 02:24 PM

Here's a CSS-based one that doesn't flicker:
http://meyerweb.com/eric/css/edge/popups/demo2.html

Posted by: whistler Jan 10 2011, 06:49 PM

QUOTE(Darin McGrew @ Jan 10 2011, 03:24 PM) *

Here's a CSS-based one that doesn't flicker:
http://meyerweb.com/eric/css/edge/popups/demo2.html


Thanks Darin, it looks like a good option. While waiting for your feedback, I found and studied this javascript tutorial, and am thinking to use it...but...

in addition to changing the image with each mouseover of the links, I want to shoe different tex to match each new image created by the mouseover...

How would I do that? Do I have to make the text an image and change two images at the same time or maybe put the image together with the text in a combined image...

Posted by: pandy Jan 10 2011, 07:34 PM

No. And you may be able to do that with CSS too. There is no hack that fits all and we don't know very much about your page, how much text you want to show and where, so it's hard to say if CSS or JS would be best.

Posted by: Darin McGrew Jan 10 2011, 09:42 PM

This example changes text on rollover:
http://meyerweb.com/eric/css/edge/popups/demo.html

It shouldn't be too hard to apply the technique to changing both the image and the text.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)