Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Thanked 0 Times in 0 Posts

    Multiple event handler problem?

    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Thanked 570 Times in 563 Posts
    It should work fine if you have different names for the images AND different names for the functions/event handlers ...


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts