Topic awaiting preservation: mouse rollover effects different image & text (Page 1 of 1)

Hi all,
Does anyone know where I can find a unique mouseover script? I need it to be able to do the following:

When mousing over an image it causes an image change on a different location on the page and it would also cause text to appear in a cell in a different location on the page.

Is this possible?

Thank in advance for your replies

I forgot to mention one thing. I could do this effect pretty easily by creating an image of the text but I'm trying to reduce the load time of the page because of all the preloaded images in this photo gallery already so I would rather be able to change the text for this effect instead of a third location graphic.

Thanks again!

You should be able to accomplish this using a mouse over "image swapping" script combined with the .innerHTML property, eg. for a div element. It sounds like you're familiar with image swapping, so the next thing is to change the text of an element dynamically via JS.

eg. if you have something called "myDiv", <div id="myDiv"> text here </div> ..

Your code might look something like this (for the mouseover) from within the image you're going to change:

onmouseover="this.src='image2.jpg';document.getElementById('myDiv').innerHTML='some other text'"

On the mouse out, you could reset the image src and change the .innerHTML to null or whatever to reset it. If you're lost, just hit Google with "javascript image swap" and "javascript innerHTML" - tons of examples.

You could break that mouseover/out stuff into functions also, which would save time if you're going to be doing this simultaneous image swap/text changing stuff with multiple items.


[This message has been edited by Scott (edited 04-26-2003).]

Thanks very much for the help... I'll give it a try today!