changer src d'une div principale planant sur un autre 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>

Je souhaite modifier src of 'main-image' div with a src d'un autre divs que lorsque vol stationnaire sur cette divs.changer src d'une div principale planant sur un autre divs

Lorsque je passe la souris sur ce div il remplace par le src spécifique.

Je veux dynamiquement obtenir src de chaque div et le remplacer par src de l'image div principale.

Source

2015-11-16 Anonymous

Get src de intérieur img étiquette en vol stationnaire et le remplacer par ce

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

Pour votre information: utilisation class au lieu de id, donc vous pouvez le rendre plus 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>

Source

2015-11-16 06:16:38

-1

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

Source

2015-11-16 06:20:24 Apb

essayer:

$('div[id$="img"]').hover(function() { 
    $('.Main-image').attr("src",$(this).find('img').attr('src')); 
    }, function() { 
    $('.Main-image').attr("src","images/img-40.jpg"); 

    });

Source

2015-11-16 06:21:02 madalinivascu

Vous voulez dire ceci:

Vous pouvez garder les images si vous les aviez à précharger, mais utilisez le attribut de données et une classe pour ajouter l'événement à tous divs

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="images/img-40.jpg" class="Main-image" /> 
 
</div> 
 

 
<div class="countries" id="iranimg" data-src="images/irani.jpg">Iran</div> 
 
<div class="countries" id="spainimg" data-src="images/spanin.jpg">Spain</div> 
 
<div class="countries" id="turkeyimg" data-src="images/turkey.jpg">Turkey</div>

Source

2015-11-16 06:22:07 mplungjan

changer src d'une div principale planant sur un autre divs

Répondre

Questions connexes