javaScript - Looking for a rollover script to handle text event

Hi -

I'm looking for a script that will allow me do text rollover in a secondary location on the page in response to a text MouseOver event.

Anyone know of a source for something like this?

All suggestions/comments welcome.

Thanks -
Robsta

Can you explain this a little better? - i'm confused

Hi Stumpy -

I knew someone would ask me this... here goes. There's probably a technical term for what I'm trying to do that would explain things perfectly.

It's similar to an img rollover where img#1 and img#2 are in different locations on the page - when you mouseOver img#1, img#2 performs the rollover event. I'd like to be able to do this, but with text instead of images. MousingOver txt#1 changes the text of txt#2.

Does this make sense - I know how to do this with images. Can this be done with text?

What term adequately expresses this?

All the best,
Robsta

Gotcha!

Yes - the property you are looking for is called "innerhtml". From memory it works something like:Basically, you'll need to wrap the text that you want changed in a DIV or SPAN. To relate it to an image rollover, you are essentially substituting .src with .innerhtml.

If my example is useless, click here for more info

Hi Stumpy -

Thanks for the speedy reply. I'll give it a spin.

Do I need to preload the text? Do I handle the text as an imported .txt file (similar to the way I'd handle an image file)? Do I treat this similarly to the way I've worked with img rollovers in the past?

For example (using this img rollover script to illustrate):

<script language="JavaScript">
<!-- Begin
// Preload Images
var image1 = new Image(); image1.src = "imgs/image1.jpg";
var image2 = new Image(); image2.src = "imgs/image2.jpg";
var image3 = new Image(); image3.src = "imgs/image3.jpg";
var image1b = new Image(); image1b.src = "imgs/text1.jpg";
var image2b = new Image(); image2b.src = "imgs/text2.jpg";
var image3b = new Image(); image2b.src = "imgs/image3.jpg";
// End -->
</script>

<div id="pic1"><a href="#" onmouseover="image1.src='imgs/image1.jpg'; image1b.src='imgs/text1.jpg';" onmouseout="image1.src='imgs/text1.jpg'; image1b.src='imgs/blank1.jpg';">
<img name="image1" src="imgs/text1.jpg" height="149" width="222" border="0"></a></div>

Would you mind elaborating further with a wee snippet of code?

Thanks for the Mozilla link - as always, when I'm in uncharted territory, the learning curve's steep and I'm slow to catch on.

Thanks again -
Robsta

The text you want to replace is the same as the img url you'd use when using .src - you can store it in a JS variable, or use a literal string. There's nothing fancy about it.

Hi -

Thanks for your reply. I'll take a stab at it tomorrow and let you know how it turns out.

- Robsta

The following works in Mozilla, IE, and Konqueror and should give you a good base from which to start.

Thanks dHuston and Stumpy. Works beautifully.

If I wanted to add a hyperlink to the toggle 'hello!', how would I implement that?

- Robsta

Just add it as you would a normal link. In the code sample I provided, I just left the "href" parameter empty, but you could stick a link in for that value as you would any other hyperlink in standard HTML.

Duh! Thanks.

Much embarassment -
robsta