Need a little help.

They have: 2 posts

Joined: Jan 2000

I've cut and pasted a piece of code that will change a button to red on mouseover.
My problem is that I used to of the same buttons side by side. Only the right button changes to red no matter which button I mouseover.
I know this is probably simple java mistake on my part. It's my first time using Java. But I would appreciate any advise on how to get this thing to work.
The url is: http://lightning.prohosting.com/~banzaimk/

Here's the section that's giving me problems. I included the part that's in the head as well.
-------------------------------------------

<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide this script from non-javascript-enabled browsers

// pre-cache 'filename' button state images

if (document.images) {
var Nbuttonred_up = new Image(75,75)
Nbuttonred_up.src = "button-red_up.gif"

var Nbuttonred_over = new Image(75,75)
Nbuttonred_over.src = "button-red_over.gif"

}
// function that displays status bar message

function dm(msgStr) {
document.returnValue = false;
if (document.images) {
window.status = msgStr;
document.returnValue = true;
}
}
// functions that swap images

function di(id,name){
if (document.images) document.images[id].src=eval(name+".src");
}

// stop hiding -->
</SCRIPT>

</head>

<body>

<a href="http://lightning.prohosting.com/~banzaimk/frames/indexframes.html" onMouseOver="di('Nbuttonred', 'Nbuttonred_over' ); " onMouseOut="di('Nbuttonred','Nbuttonred_up');" ><img name="Nbuttonred" src="button-red_up.gif" width="75" height="75" border="0"></a>

<font color=#000040>xxxxxxxxxxxxx</font>

<a href="http:lightning.prohosting.com/~banzaimk/noframes/nfindex.html" onMouseOver="di('Nbuttonred', 'Nbuttonred_over' ); " onMouseOut="di('Nbuttonred','Nbuttonred_up');" ><img name="Nbuttonred" src="button-red_up.gif" width="75" height="75" border="0"></a>

// section below just places text links directly below the buttons.
<br>
<font color=#000040>xxx</font>
<a href="http:lightning.prohosting.com/~banzaimk/frames/indexframes.html">Frames</a>
<font color=#000040>xxxxxxxxxxxxxxx</font>
<a href="http:lightning.prohosting.com/~banzaimk/noframes/nfindex.html">Non-Frames</a>
</center>
</body>

------------------
Banzai

John Pollock's picture

He has: 628 posts

Joined: Mar 1999

Both images are using the same name, which is confusing the browser. Change the name of the image on one of them, like this:

<a href="http:lightning.prohosting.com/~banzaimk/noframes/nfindex.html" onMouseOver="di('Nbuttonred2', 'Nbuttonred_over' ); " onMouseOut="di('Nbuttonred2','Nbuttonred_up');" ><img name="Nbuttonred2" src="button-red_up.gif" width="75" height="75" border="0"></a>

Should do the trick.

------------------
John Pollock
http://www.pageresource.com
http://www.javascriptcity.com

They have: 2 posts

Joined: Jan 2000

Thank you for your help!

------------------
Banzai

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.