JQuery: How do you change a graphic on a mouse hover event?

Question

Using JQuery, how do I change a map icon whenever I mouse hover over a row in an HTML table/div?

Here is an example:

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

Notice when you mouse hover over a home listing on the left, the corresponding map icon on the right changes.

Question: how do I emulate this functionality using JQuery?

---

Update: It was suggested below that an ID linked the two elements. If that is the case, how would you still accomplish this?

Answer 1

Probably both elements are linked by a ID..

Answer 2

Use the for="" attribute in html, like

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

On the image:

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

jQuery, using the hover function to animate the corresponding ID, the same one in the for:

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

Answer 3

Something like this:

$(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%'
        });
    });
});

Just make sure you change the "#googleMaps" and "#mapLinks" thing :)