View Full Version : Multiple event handler problem?

01-07-2012, 09:50 PM
Hello all,

I'm wondering if anyone can offer advice on a simple (or so I thought!) Javascript menu I'm trying to create. I'm creating 5 buttons, using event handlers (onmouseover etc) which exchange 1 image for another.

I did the first one fine - it worked perfectly, but as soon as I added the rest they all stopped working properly. The best I have got, is that the last link will do what it's supposed to regardless of which link I hover over! Which is strange. So the browser seems to be actioning the last thing on the list if that makes sense. It seems to me that I need to add an "if" type attribute, so "if" I hover over the home button, the home images change, as opposed to the last one on the list.

This is the code I have so far for a single link - the rest are copies of this with adjustments made to the imgname and image sources obviously.....

<div style="width:80px; height:20px;margin-top:20px;margin-left:85px;"><a href="about.html"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
name="aboutbutton" src="img/aboutn.png" width="80" height="20" border="0"
alt="javascript button 1"></a>
<script language="JavaScript">
upImage = new Image();
upImage.src = "img/abouth.png";
downImage = new Image();
downImage.src = "img/aboutc.png"
normalImage = new Image();
normalImage.src = "img/aboutn.png";
function changeImage()
document.images["aboutbutton"].src= upImage.src;
return true;
function changeImageBack()
document.images["aboutbutton"].src = normalImage.src;
return true;
function handleMDown()
document.images["aboutbutton"].src = downImage.src;
return true;
function handleMUp()
return true;

Any suggestions on where I am going wrong would be wonderful.

Thanks so much in advance!

All the best

01-08-2012, 12:16 AM
It should work fine if you have different names for the images AND different names for the functions/event handlers ...