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:
Hope someone can help me solve this. Thank you in advance.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>
CSS Codes
Reply With Quote
Bookmarks