CODEWITHSUNDEEP
jqueryhovermouseoversrc
st4ck0v3rfl0w
st4ck0v3rfl0w

Reputation: 6755

jQuery Mouseover Image from Other Div

<div id="menu_1"><img src="replacement"/></div>
<div id="menu_2"><img src="replacement"/></div>
<div id="menu_3"><img src="replacement"/></div>

<div id="menu_1_hover"><img src="onhover_userreplacement_img"/></div>
<div id="menu_2_hover"><img src="onhover_userreplacement_img"/></div>
<div id="menu_3_hover"><img src="onhover_userreplacement_img"/></div>

How would I on hovering over menu_1, menu_2 and menu_3 replace the images with the respective images located in menu_1_hover, menu_2_hover, menu_3_hover ?

Upvotes: 0

Views: 754

Answers (3)

Joshkunz
Joshkunz

Reputation: 6055

$("#menu_1").hover(function () {
    $(this).html($("div #"+$(this).attr("id")+"_hover").html());
}

That should work for "menu_1" you should set a class for all of the elements though so you only have to put the .hover thing once. Not tested. :)

Upvotes: 0

Peeter
Peeter

Reputation: 9382

$(document).ready(function() {
    $("#menu_1").hover(function() {
        var id = $(this).attr("id");
        var src = $(this).children("img").attr("src");
        $("#" + id + "_hover").children("img").attr("src", src);
    });
});

A working example: http://jsfiddle.net/gtWCY/

To add a single hover event listener I'd suggest adding a class like "hover" to all of the menu_'s.

Upvotes: 0

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

Better to use CSS instead of JQuery, but if you must do it in JQuery, I can post the answer, just inform me. :)

Upvotes: 1

Related Questions