JQuery: Comment modifier un graphique sur un survol de la souris?

Question

En utilisant JQuery, comment puis-je changer une icône de carte chaque fois que je souris sur une rangée dans une table/div HTML?

est un exemple:

http://www.sfsunriseidx.com/homes/94131/?uuid=9ed7269b-5327-4c88-ba15-f700ed343d69&source=REDIR

Avis lorsque vous placez le curseur de la souris sur une liste de la maison sur la gauche, l'icône de carte correspondante sur les bons changements.

Question: comment émuler cette fonctionnalité à l'aide de JQuery?

---

Mise à jour: Il a été suggéré ci-dessous qu'un ID lien entre les deux éléments. Si c'est le cas, comment allez-vous accomplir cela?

Answer 1

Probablement les deux éléments sont reliés par un ID ..

Answer 2

Utilisez l'attribut for="" en html, comme

<a href="page.html" for="mapIcon4" class="mapHover">Hover Link</a> 

Sur l'image:

<img id="mapIcon4" src="myImg.png" /> 

jQuery, using the hover function pour animer l'ID correspondant , le même dans le pour:

$(".mapHover").hover(function() { 
    $("#" + $(this).attr('for')).animate({"left": "-=50px"}, "slow"); 
}, function() { 
    $("#" + $(this).attr('for')).animate({"right": "+=50px"}, "slow"); 
}); 

Answer 3

Quelque chose comme ceci:

$(document).ready(function() { 
    var googleMap = $("#googleMaps"); 

    $('a', '#mapLinks').hover(function() { 
     var index = $(this).index(this); 
     $('img:eq(' + index + ')', googleMap).animate({ 
      width: '+=10%' 
     }); 
    }, function() { 
     var index = $(this).index(this); 
     $('img:eq(' + index + ')', googleMap).animate({ 
      width: '-=10%' 
     }); 
    }); 
}); 

Assurez-vous de changer le « #googleMaps » et « #mapLinks » chose :)