Rollover

Code for a simple rollover

[Adam5000]

Rollovers: A cool javascript trick.

It's a cool trick and I've forgotten the code for it. I've got some buttons on the page I want to make light up on mouseover and go dark again on mouseout and I have both images for each button (for example "Next_page_button_off.jpg" and "Next_page_button_on.jpg"). But I've forgotten the code to make them switch and then switch back. And there's also a short set of code to preload the images that goes with it. Help!

[whoisgregg]

My preferred shorthand method for doing this inline is:

<img src="/path/to/image_out.gif" onmouseover="this.src=this.src.replace('_out', '_over');" onmouseout="this.src=this.src.replace('_over', '_out');" />

[JAB Creations]

(X)HTML

<element onclick="change('elemetsid', 'thenewclasshere');"></element>

External JavaScript

function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

This function can be used multiple times as well...

<element onclick="change('elemetsid1', 'thenewclasshere1'); change('elemetsid2', 'thenewclasshere2');"></element>

- John

[edited by: JAB_Creations at 9:23 am (utc) on Nov. 8, 2006]