Help - Search - Members - Calendar
Full Version: What is best way to mouseover link to change an image?
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
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?
Darin McGrew
Here's a CSS-based one that doesn't flicker:
QUOTE(Darin McGrew @ Jan 10 2011, 03:24 PM) *

Here's a CSS-based one that doesn't flicker:

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...
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.
Darin McGrew
This example changes text on rollover:

It shouldn't be too hard to apply the technique to changing both the image and the text.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.