web-dev-qa-db-fra.com

Changer l'image sur clic

Je suis en train de créer une disposition d'image d'arrière-plan complète et je souhaite modifier l'image en fonction de la page visitée par l'utilisateur. Pour en venir au fait: je dois changer un attribut d'images lorsque l'utilisateur clique sur un lien. Voici jusqu'où je suis arrivé:

$(function() {
  $('.menulink').click(function(){
    $("#bg").attr('src',"img/picture1.jpg");
  });
});


    <a href="" title="Switch" class="menulink">switch me</a>
    <img src="img/picture2.jpg" id="bg" />

Merci, probablement des trucs faciles, mais au-dessus de ma tête!

jqueryimagefunctionhref
15
Johannes Kärnstam

Il revient en arrière car par défaut, lorsque vous cliquez sur un lien, il suit le lien et charge la page. Dans votre cas, vous ne voulez pas ça. Vous pouvez l'empêcher soit en faisant e.preventDefault (); (comme Neal l'a mentionné) ou en renvoyant false:

$(function() {
 $('.menulink').click(function(){
   $("#bg").attr('src',"img/picture1.jpg");
   return false;
 });
});

Question intéressante sur les différences entre empêcher le défaut et retourner faux.

Dans ce cas, return false fonctionnera très bien car l'événement n'a pas besoin d'être propagé.

24
Hugo Migneron

je vais vous aider une seconde à faire de vous un violon ^ _ ^

[~ # ~] mise à jour [~ # ~]

vous devez utiliser preventDefault() pour que le lien ne passe pas lorsque vous cliquez dessus:

violon: http://jsfiddle.net/maniator/Sevdm/

$(function() {
 $('.menulink').click(function(e){
     e.preventDefault();
   $("#bg").attr('src',"img/picture1.jpg");
 });
});
4
Neal

vous pouvez utiliser la fonction "attr" !!! st comme `$ (" # id "). attr ('src'," source ");

2
mehran
 $('div#imageContainer').click(function () {
      $('div#imageContainerimg').attr('src', 'YOUR NEW IMAGE URL HERE'); 
});
2
GM Marimuthu

Vous devriez envisager d'utiliser un bouton pour cela. Les liens doivent généralement être utilisés pour liaison. Les boutons peuvent être utilisés pour d'autres fonctionnalités que vous souhaitez ajouter. La solution Neals fonctionne, mais c'est une solution de contournement.

Si vous utilisez un <button> au lieu d'un <a>, votre code d'origine devrait fonctionner comme prévu.

1
Frederik Wordenskjold

Lorsque vous cliquez sur le texte ou le lien, l'image sera changée en une autre image afin que vous puissiez utiliser le script ci-dessous vous aide à changer l'image en cliquant sur le lien:

<script>
$(document).ready(function(){
$('li').click(function(){
var imgpath = $(this).attr('dir');
$('#image').html('<img src='+imgpath+'>');
});
$('.btn').click(function(){
$('#thumbs').fadeIn(500);
$('#image').animate({marginTop:'10px'},200);
$(this).hide();
$('#hide').fadeIn('slow');
});
$('#hide').click(function(){
$('#thumbs').fadeOut(500,function (){
$('#image').animate({marginTop:'50px'},200);
});
$(this).hide();
$('#show').fadeIn('slow');
});
});
</script>




 <div class="sandiv">
    <h1 style="text-align:center;">The  Human  Body  Parts :</h1>
    <div id="thumbs">
    <div class="sanl">
    <ul>
    <li dir="5.png">Human-body-organ-diag-1</li>
    <li dir="4.png">Human-body-organ-diag-2</li>
    <li dir="3.png">Human-body-organ-diag-3</li>
    <li dir="2.png">Human-body-organ-diag-4</li>
    <li dir="1.png">Human-body-organ-diag-5</li>
    </ul>
    </div>
    </div>
    <div class="man">
    <div id="image">
    <img src="2.png" width="348" height="375"></div>
    </div>
    <div id="thumbs">
    <div class="sanr" >
    <ul>
    <li dir="5.png">Human-body-organ-diag-6</li>
    <li dir="4.png">Human-body-organ-diag-7</li>
    <li dir="3.png">Human-body-organ-diag-8</li>
    <li dir="2.png">Human-body-organ-diag-9</li>
    <li dir="1.png">Human-body-organ-diag-10</li>
    </ul>
    </div>
    </div>
    </div>

css:

<style>
body{ font-family:Tahoma, Geneva, sans-serif; color:#ccc; font-size:11px; margin:0; padding:0; background-color:#111111}
.sandiv{ width:980px;height:570px;margin:0 auto;margin-top:20px; padding:10px; background-color:#000;-webkit-box-shadow: 0 1px 2px #666;box-shadow: 0 1px 2px #666;}
#image{width:348px; height:375px; border-radius:100%;margin:0 auto; margin-top:50px; margin-bottom:20px;}
#thumb{width:400px;margin:0 auto; display:none;}
ul{list-style:none; padding:0; margin:0;}
 li{ width:auto ; height:50px; border-radius:100%; margin:5px; cursor:pointer; }
.sanl
{
 margin-top:50px;
 float:left;
 width:210px;
 margin-left:30px;
 margin-right:30px;
  }
.sanr
{
    margin-top:50px;
 float:left;
 width:210px;
 margin-left:60px;
 margin-right:30px;
}
.man
{
 float:left;
 width:350px;
 margin-left:30px;
 margin-right:30px; 
}
</style>

Je pense que le code ci-dessus vous est très utile. Ce code que je reçois de ici ou démo ici pour votre référence

1
M. Lak