changing src of a main div on hovering on another divs

<html>
<head><script src="jquery-1.10.1.min.js"></script></head>
<body>
<div><img src="images/img-40.jpg" class="Main-image"/></div>

<div id="iranimg"><img src="images/irani.jpg" style="display:none;"/>Iran </div>
<div id="spainimg"><img src="images/spanin.jpg" style="display:none;"/>Spain </div>
<div id="turkeyimg"><img src="images/turkey.jpg" style="display:none;"/>Turkey </div>



<script>

$(document).ready(function(){
$('#iranimg').hover(function() {
$( '.Main-image' ).attr("src","images/irani.jpg");
}, function() {
    $( '.Main-image' ).attr("src","images/img-40.jpg");

});


})
</script>

</body>
</html>

I want to change src of 'main-image' div with asrc of a another divs only when hover on that divs.

When I hover on that div it replaces with the specific src.

I want to dynamically get src of each div and replace it with src of main div image.

Solution

Get src of inner img tag when hovering and replace with that

$('#iranimg,#spainimg,#turkeyimg').hover(function() {
  $('.Main-image').attr("src", $('img',this).attr('src'));
}, function() {
  $('.Main-image').attr("src", "images/img-40.jpg");
});

FYI : Use class instead of id, so you can make it more simple

jQuery:

$('.imgChange').hover(function() {
  $('.Main-image').attr("src", $('img',this).attr('src'));
}, function() {
  $('.Main-image').attr("src", "images/img-40.jpg");
});

HTML:

<div><img src="images/img-40.jpg" class="Main-image"/></div>

<div class="imgChange"><img src="images/irani.jpg" style="display:none;"/>Iran </div>
<div class="imgChange"><img src="images/spanin.jpg" style="display:none;"/>Spain </div>
<div class="imgChange"><img src="images/turkey.jpg" style="display:none;"/>Turkey </div>