jquery图像映射悬停效果

我已经创建了一个图像映射，我想要突出显示鼠标悬停在地图上的区域。为了实现这个，我写了下面的代码。jquery图像映射悬停效果

JS：

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#Map area').hover(function(){ 
       alert('alert'); 
       $(this).css('border','1px solid #FF0000'); 
      }); 
     }); 
</script>

HTML：

<div id="mainmap"><img src="images/map.jpg" alt="" usemap="#Map"/></div> 
<map name="Map" id="Map"> 
     <area shape="poly" coords="21,326,203,316,220,141,52,153,48,182,37,193,29,220,27,241,28,255,33,259" href="#" alt="1" /> 
     <area shape="poly" coords="31,405,209,410,225,427,336,427,337,360,200,359,208,317,21,326,15,344,41,360" href="#" alt="11" /> 
</map>

当我鼠标移到而我认为这是应该提醒，一旦提醒两次的区域。另外.css（）函数似乎不能与这个选择器一起使用。

请指导我如何解决

来源

2011-05-21 mysterious

你需要了解什么<map>手段，它在图像

说$(this).css('border','1px solid #FF0000');你告诉做出<map>实线边框的点击区域一个简单的定义，但<map>只是像<head>元素，它只包含定义。

为了制作区域中的边框，您需要改为2张图片。

来源

2011-05-21 18:24:50 balexandre

看来，当你在地图区域移动鼠标，警报会弹出，在这一点上，你的鼠标是不可能的地图区域，所以onmouseleave事件是触发，所以有两个alerts。如果你用console.log替换它们，它应该没问题。这里测试：http://jsfiddle.net/8ZXb9/

来源

2011-05-21 18:22:35 wong2

jquery图像映射悬停效果

回答

相关问题