How can I get my javascript image onMouseOver code to work in an html image map?
Question
I'm trying to get this code working for Chrome, Firefox and IE. Each link in the image map has to have its own image that should appear on hover. My main problem is that all the links are showing the same image instead of their own specific one.
Also, it only seems to work in Chrome :( why?
Please help if you can :)
Sample from 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!
1 answers
solution1
1 ACCPTED
In JSFiddle, if you're going to call functions in events, you need to declare variables with window.show and window.hide because your script is put inside a window.onload method:
window.show = function() {
document.querySelector('.pop').style.visibility = 'visible';
}
window.hide = function() {
document.querySelector('.pop').style.visibility = 'hidden';
}
If you want to, you can also change the wrap on the left side of the JSFiddle. The option No wrap - in <body> puts your script in the global scope, just before the closing of the body tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.