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圖像映射懸停效果

回答

相關問題