Menu
Hey
I have a page that has two buttons, repeated about 100 times. It’s for a song, to preview or download. The script I used works, but only when I have one instance of it in the file. The minute I have two, it doesn’t work. Short of creating id’s for every instant (code would be massive!) is there a way for each new instance to point to the same rollover code?
[CODE]<HEAD>
<SCRIPT language=”JavaScript”>
<!–
if (document.images)
{
pic1on= new Image(100,25);
pic1on.src=”shoes2.gif”;
pic1off= new Image(100,25);
pic1off.src=”shoes1.gif”;
}
function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + “on.src”);
document[imgName].src= imgOn;
}
}
function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + “off.src”);
document[imgName].src= imgOff;
}
}
//–>
</SCRIPT>
</HEAD>
Html looks like this:
[CODE]<A HREF=”index.html” onMouseover=”lightup(‘pic1’)” onMouseout=”turnoff(‘pic1’)”>
<IMG SRC=”../images/shoes1.gif” name=”pic1″ width=”100″ height=”25″ border=”0″></A>
Source/Example can be found here:
[url]http://www.pageresource.com/jscript/jhover.htm
I had this custom tailored with my images, but I’ve been going back and forth between CSS/JS to see what warrants the best result. All I want to do, is be able to change the image when you hover over it, and have 100 or more of the same button on the site.
Thanks!