显示功能不适用于图像映射答案

【问题标题】：show function not working with imagemap显示功能不适用于图像映射
【发布时间】：2012-11-09 17:40:16
【问题描述】：

我有一个图像映射，想使用 show 功能淡入一些矩形 div。但它没有响应。

Javascript

<script type="text/javascript">
$(".levert").click(function () {
$("#popUpDiv").show("slow");
});

</script>

HTML

<img id="logo" src="./logo2.png" alt="Phlox" usemap="#links"><p class="logotext">Phlox</p></img>

<map name="links">
<area shape="circle" coords="294,46,46" href="#" class="levert"></area>
</map>

</div>
<div id="popUpDiv" style="display:none">
</div>

CSS

#popUpDiv {
      position:absolute;
      background-color:#3F6;
      width:400px;
      height:400px;
      border:5px solid #000;
      z-index: 9002;
      }

【问题讨论】：

标签： javascript jquery show imagemap area

【解决方案1】：

将您的代码包装在文档就绪调用中：

<script type="text/javascript"> 
$(document).ready(function() {
    $(".levert").click(function() {
        $("#popUpDiv").show("slow");
    });
});
</script>

【讨论】：

是的，读到这个，为什么这是必要的？不知道这个函数的含义编辑：我想我首先知道 jquery.js 的含义，然后才能使用它编写脚本。
这可以确保在加载 DOM 并且在加载页面内容之前加载代码。否则，如果没有它，它将尝试在页面（以及您希望代码处理的内容）加载之前执行。

【解决方案2】：

如果我在页面加载后执行此操作，则适用于 Mac 上的 Fx17 和 Chrome 22

$(function() { .... });

DEMO

【讨论】：