SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2000
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript OnMouseOver, OnClick

    I am working on a little project.

    I have a menu on the left hand side, and when I mouse over the image it changes to another image like it should. But when I click on the image I want it to stay like the hovered image.

    The code I currently have is ...

    function isimgact(id, act)
    {
    if(document.images) document.images[id].src = eval( "isimages." + id + isamap[act] + ".src");
    }

    if (document.images) { // ensure browser can do JavaScript rollovers.
    isimages = new Object();

    isimages.NavBar2_df = new Image();
    isimages.NavBar2_df.src = "images/black1.gif";
    isimages.NavBar2_ov = new Image();
    isimages.NavBar2_ov.src = "images/red1.gif";

    }
    // -- and here is the html part
    <a Href="home.htm" OnMouseOver="isimgact( 'NavBar2',1)" OnMouseOut="isimgact( 'NavBar2',0)" onmousedown="return isimgact( 'NavBar2',1)" target="main"><Img Src="images/black1.gif" Border="0" height="36" width="188" Name="NavBar2" Alt=""></a>

    Could someone please point me in any direction with help on this topic.

    Thanks.

  2. #2
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, if I have this right, you want the image to stay the same as the hovered image once the link has been clicked (i.e. it won't ever change back to how it was before it was hovered over, even if it is hovered over again later).

    Well, if that's what you're trying to do, I have an idea which will work, although I'm sure there are much more sophisticated ways of doing it!

    The idea below is to make a variable 'clicked' which starts off as 0, but changes to 1 if a link is clicked. And the rollover only takes place if clicked = 0 (i.e. the link hasn't been clicked).

    -------------------

    You could add :

    var clicked = new Array()
    for (i=0; i<numberoflinks; i++) {clicked[i]=0}

    to the <head>, replacing numberoflinks with, you guessed it, the number of links.

    and then add the function:

    function click(linknum)
    {clicked[linknum] = 1}

    and alter your isimgact function as follows:

    function isimgact(id, act, linknum)
    {
    if (clicked[linknum] == 0)
    {
    if(document.images) document.images[id].src = eval("isimages." + id + isamap[act] + ".src");
    }
    }

    and alter all references to isimgact to include the appropriate number for linknum. And last but not least add:
    onClick="click(linknumber)"
    to the <a> tag of all your links, where linknumber is the number of that particular link.

    Or something along those lines.
    Like I said, I'm sure there's a better way, but we'll have to wait for someone a bit more experienced to enlighten us!

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2000
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for the quick reply,

    The thing that bothers me, If I remove the onmouseout(return to original image);

    Then the onclick works, it will keep it currently as highlighted, and then your code will work perfectly, but because of the onmouseout, it will highlight the image, and then I will click on it opening up another window, but when I move the mouse to another menu image, the current image goes back to the original.

    That is a run on sentance, but I hope you understand. Is there another means of onmouseout that I can use.

  4. #4
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know why that's happening for you, because when I tried out the code (with 2 menu items) hovering over a different one didn't affect the first one.
    It may have something to do with the parameters in the function calls. Could you post your code (the function and a couple of the calls)? I'm pretty sure it should work.

  5. #5
    SitePoint Enthusiast slp's Avatar
    Join Date
    May 2001
    Location
    Australia
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This probably doesn't have anything to do with why it's not working properly, and you may well have already realised it, but 'click' was an extremely bad choice for a function name (which I found out when testing the script on a different browser)!
    I think it must be a predefined function. Better to use 'clickit' or something...
    Sorry about that.


Bookmarks

Posting Permissions

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