www.webdeveloper.com
Results 1 to 7 of 7

Thread: Menu with image change on mouse click

  1. #1
    Join Date
    Sep 2004
    Posts
    2

    Menu with image change on mouse click

    Hi,

    I've been looking for a script for a menu which makes the image change when you click down on it. I want it so that when you click on another image, it changes and the other image clicked beforehand is reset to the original image.

    I hope that makes sense!

    It would be appriciated if someone could point me in the right direction.

    Thanks.

  2. #2
    Join Date
    Sep 2004
    Location
    Midwest
    Posts
    1,629
    Beebs:
    I wrote the following code. In the body, there are two images, initally set to display A1.jpg, and B1.jpg. On mouseover/out of these images, they change to A2 and B2, respectively. On click of either of these images, they change to A3 and B3. When an image is clicked it stays set on A3 or B3. If A was clicked, and then B is clicked, the A image will reset to A1, and B will stay set as B3, until A is clicked, and so on. I hope this helps.

    <HTML>
    <Head>
    <Script Language=JavaScript>

    var prevClicked = "";

    function staySet(curr){

    tmpStr = curr.toString();
    if (prevClicked != "")
    {
    document.getElementById(prevClicked).disabled = false;
    document.getElementById(prevClicked).src = prevClicked+'1.jpg'
    }
    document.getElementById(tmpStr).disabled = true;
    document.getElementById(tmpStr).src = tmpStr+'3.jpg';
    prevClicked = tmpStr;
    }

    function SwapImage(curr){

    tmpStr = curr.toString();
    var swap = event.type;
    if (swap == 'mouseover'){document.getElementById(curr).src=tmpStr+'2.jpg'}
    if (swap == 'mouseout'){document.getElementById(curr).src=tmpStr+'1.jpg'}
    }

    </Script>
    </Head>
    <Body>
    <center>
    <br><br><br>
    <a href=javascript:staySet('A')><img src='A1.jpg' id='A' onMouseover="SwapImage('A')" onMouseout="SwapImage('A')" alt='This is the hover text'></a>
    <a href=javascript:staySet('B')><img src='B1.jpg' id='B' onMouseover="SwapImage('B')" onMouseout="SwapImage('B')" alt='This is the hover text'></a>
    </center>
    </Body>
    </HTML>

  3. #3
    Join Date
    Sep 2004
    Posts
    2
    That is perfect - thank you very much!

  4. #4
    Join Date
    Sep 2004
    Posts
    2
    Yeh! Nice. Just what I was looking for too. Thanks.

    And by changing
    document.getElementById(tmpStr).src = tmpStr+'3.jpg';
    to
    document.getElementById(tmpStr).src = tmpStr+'2.jpg';
    the mouseclicked image stays the same as the mouseover image.

    Can the code be changed so that the images can be stored in a different directory, separate from the html file?

  5. #5
    Join Date
    Sep 2004
    Posts
    2
    Errr, maybe it's not that nice.
    The actual images are not preloading, right? They are downloaded only when the "1" version of each button is given a "mouseover".

    So it is not good for slow interent connections or large images.

  6. #6
    Join Date
    Aug 2006
    Posts
    5
    This is exactly what I needed as well, thank you.

  7. #7
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    For a better supported and more simple method see http://www.webdeveloper.com/forum/sh...d.php?t=118387 . There's no reason to use JavaScript to do things that are already built in.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles