How can I get my javascript image onMouseOver code to work in an html image map? -
i'm trying code working chrome, firefox , ie. each link in image map has have own image should appear on hover. main problem links showing same image instead of own specific one.
also, seems work in chrome :( why?
please help if can :)
fiddle
sample html file
<img src="images/solutions_table.jpg" width="940" height="818" alt="solutions comparative table" usemap="tablemap"> <map name="tablemap" > <script type = "text/javascript"> function show() { document.getelementbyid('pop').style.visibility = 'visible'; } function hide() { document.getelementbyid('pop').style.visibility = 'hidden'; } </script> <area id="pop" class="p1" href="minnow.html" shape="rect" coords="1,116,105,184" alt="minnow" onmouseover="show()" onmouseout="hide()"> <area id="pop" class="p2" href="guppie.html" shape="rect" coords="1,182,105,250" alt="guppie" onmouseover="show()" onmouseout="hide()"> <area id="pop" class="p3" href="blue marlin.html" shape="rect" coords="1,248,105,316" alt="blue marlin" onmouseover="show()" onmouseout="hide()"> <area id="pop" class="p4" href="black marlin.html" shape="rect" coords="1,314,105,382" alt="black marlin" onmouseover="show()" onmouseout="hide()"> <area id="pop" class="p5" href="baracuda.html" shape="rect" coords="1,381,105,450" alt="baracuda" onmouseover="show()" onmouseout="hide()"> </map> the css
#pop { display:block; width:506px; height:506px; z-index:110; position:absolute; margin-top:-701px; margin-left:105px; visibility:hidden; } .p1 { content:url(images/minnow.jpg); display:block; width:506px; height:506px; z-index:110; position:absolute; margin-top:-701px; margin-left:105px; visibility:hidden; } .p2 { content:url(images/guppie.jpg); display:block; width:506px; height:506px; z-index:110; position:absolute; margin-top:-701px; margin-left:105px; visibility:hidden; } .p3 { content:url(images/blue marlin.jpg); display:block; width:506px; height:506px; z-index:110; position:absolute; margin-top:-701px; margin-left:105px; visibility:hidden } .p4 { content:url(images/black marlin.jpg); display:block; width:506px; height:506px; z-index:110; position:absolute; margin-top:-701px; margin-left:105px; visibility:hidden } .p5 { content:url(images/baracuda.jpg); display:block; width:506px; height:506px; z-index:110; position:absolute; margin-top:-701px; margin-left:105px; visibility:hidden } thank you!
in jsfiddle, if you're going phone call functions in events, need declare variables window.show , window.hide because script set within window.onload method:
window.show = function() { document.queryselector('.pop').style.visibility = 'visible'; } window.hide = function() { document.queryselector('.pop').style.visibility = 'hidden'; } if want to, can alter wrap on left side of jsfiddle. alternative no wrap - in <body> puts script in global scope, before closing of body tag.
javascript html css
No comments:
Post a Comment