View Full Version : mouse over html text to swap image

02-07-2006, 05:01 PM

I am trying to work out the code than will enable an image to change when the users cursor rolls over some html text.

eg. text links on the left of a page and a corresponding picture on the right hand side changing on mouse over so as to a give a preview of the image without actually depressing the mouse and getting into the next layer of the site.

any ideas?

02-07-2006, 05:18 PM
Link or text?
If text, replace "a" with "span" and remove the href attribute.

<img id="bigImage" src="blank.png" />
<!-- ... -->
<a href="one.html" onmouseover="document.getElementById("bigImage").src = 'one.png';" onmouseout="document.getElementById("bigImage").src = 'blank.png';">Link text</a>

02-07-2006, 05:30 PM
many thanks.

02-18-2006, 05:32 PM
Try going here


I have also been able to modify this so that instead of putting it over text, I changed the text line to a thumbnail. And when you put your mouse over the thumbnail or text you can get a bigger picture WITH a description

09-11-2006, 07:13 PM
Hello, i need help!

When the mouse goes over a picture there should appear a text in another table segment.

This is my page: http://www.wirtschaftswunder.de.vu

By going over any of the eyes there should appear text over the big eye.


P.S.: Do I need Java, Javascript or can I find a solution with html

09-11-2006, 07:32 PM
under mozilla you can just use css
any element can have pseudoclass "element:hover", so you could use color: transparent in normal, any color at hover.

In IE7 and Opera this is partialy implemented, in IE6 doesn't work at all, basically you could use

onmouseover="javascript:this.className: myclass2"
onmouseout="javascript:this.className: myclass1"
as a workaround (you can replace "this" with element ID, if the hover should induce change in other)

09-12-2006, 07:43 PM
@ ItsMeOnly: thanks for this fast reply

09-12-2006, 10:06 PM
Whoah, whoah, whoa! ItsMeOnly! What is that!? That would be completely invalid :)
I think you're trying to use css or something.

onmouseover="javascript:this.className: myclass2"

09-12-2006, 10:11 PM
Heheh. He means, of course:
onmouseover="this.className = 'myclass2';"
onmouseout="this.className = 'myclass1';"

09-12-2006, 10:28 PM
Mea culpa, wrote this at midnight (CET) when I usually don't care about anything, but just wait until I'm tired enough to go to sleep :)

...like *yawn* now.... goodnight :D