mouse over html text to swap image

[neilkw]

Hi

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?
cheers

[Twey]

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>

[neilkw]

many thanks.

[Markxxx]

Try going here

http://www.javascriptkit.com/script/script2/rolldifferent.shtml

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

[keybit]

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.

Thanks!

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

[ItsMeOnly]

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)

[keybit]

@ ItsMeOnly: thanks for this fast reply

[mburt]

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"

[Twey]

Heheh. He means, of course:
onmouseover="this.className = 'myclass2';"
onmouseout="this.className = 'myclass1';"

[ItsMeOnly]

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