Question

我试图让这些代码适用于Chrome，Firefox和IE。图像映射中的每个链接都必须具有应在悬停时显示的自己的图像。我的主要问题是所有链接都显示相同的图像而不是他们自己的特定图像。

此外，它似乎只适用于Chrome :(为什么？

如果可以，请提供帮助：）

来自html文件的示例

<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>

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
}

谢谢！

Answer 1

在JSFiddle中，如果要在事件中调用函数，则需要使用window.show和window.hide声明变量，因为您的脚本放在window.onload方法中：

window.show = function() {
    document.querySelector('.pop').style.visibility = 'visible';
}

window.hide = function() {
    document.querySelector('.pop').style.visibility = 'hidden';
}

如果您愿意，还可以更改JSFiddle左侧的换行。选项No wrap - in <body>将您的脚本置于全局范围内，就在关闭正文标记之前。

如何让我的javascript图像onMouseOver代码在html图像映射中工作？

1 个答案: