jquery image carte effets hover

J'ai créé une carte d'image et je veux mettre en évidence des zones de cartes sur la souris. Pour y parvenir, j'ai écrit le code suivant.jquery image carte effets hover

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>

Quand je souris sur une zone deux fois il alerte alors que je pense qu'il est censé alerter une fois. Aussi .css() la fonction ne semble pas fonctionner avec ce sélecteur.

S'il vous plaît guider comment puis-je corriger

Source

2011-05-21 mysterious

Vous devez comprendre ce que <map> moyens, il est une définition simple sur le clic des zones d'une image

disant $(this).css('border','1px solid #FF0000'); vous dites de faire le <map> une bordure solide, mais <map> est juste Comme les éléments <head>, il contient uniquement des définitions.

Pour créer des bordures dans les zones, vous devez utiliser 2 images à la place.

Source

2011-05-21 18:24:50 balexandre

Il semble que lorsque vous déplacez la souris dans la zone de la carte, une alerte sortira, à ce stade, votre souris est hors de la zone de la carte, si l'événement onmouseleave était déclenché, donc il y a deux alerts. Si vous les remplacez par console.log, ça devrait aller. Testez ici: http://jsfiddle.net/8ZXb9/

Source

2011-05-21 18:22:35 wong2

jquery image carte effets hover

Répondre

Questions connexes