Results 1 to 4 of 4

Thread: OnMouseOver image with links disappearing

  1. #1
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default OnMouseOver image with links disappearing

    Hi,

    I am a beginner in this thing, so sorry if it's a stupid question, but I was unable to find the answer for my problem.

    I created a mouseover image where the second image (ropes2.jpg) has links which should be accessible through imagemap. The problem is, when a cursor moves onto a link, the mouseover image (ropes2.jpg) goes back to mouseout image (ropes1.jpg). The imagemap is there, but the image disappears.

    This is the current code:
    HTML Code:
    <html>
    <head>
    <title>title</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    <script language="javascript">
    <!-- hide script from old browsers
    
    //detect browser:
    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
    else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
    else browserVer = "2";
    
    //preload images:
    if (browserVer == 1) {
    ropes1 = new Image(455,605);
    ropes1.src = "ropes1.jpg";
    ropes2 = new Image(455,605);
    ropes2.src = "ropes2.jpg";
    }
    
    //image swapping function:
    function hiLite(imgDocID, imgObjName, comment) {
    if (browserVer == 1) {
    document.images[imgDocID].src = eval(imgObjName + ".src");
    window.status = comment; return true;
    }}
    //end hiding -->
    </script>
    </head>
    <center>
    <body>
    <img name="ropes" src="ropes1.jpg" border=0 width=455 height=605 alt="" usemap="#ropesmap" onMouseOver="hiLite('ropes','ropes2','index')" onMouseOut="hiLite('ropes','ropes1','')">
    
    <map name="ropesmap">
    <area shape="poly" coords="115,136,252,121,273,124,271,142,175,151,117,154" href="link1">
    <area shape="poly" coords="119,167,157,163,184,160,241,158,247,175,182,181,155,182,119,184" href="link2">
    <area shape="poly" coords="122,196,196,192,198,210,159,214,126,212,127,207" href="link3">
    </map>
    
    </center>
    </body>
    </html>
    Hope someone can help me solve this. Thank you in advance.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Can we please see your page too?
    Jeremy | jfein.net

  3. #3
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Oh, yes, the page is here.

    (Note: last three of the links are not mapped)
    Thanks for your time...

  4. #4
    Join Date
    May 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Or maybe I should use something else instead the html/javascript/css? I was pretty sure the link problem could be solved with some javascript trick... Oh, currently I have no idea

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
  •