web-dev-qa-db-fra.com

changer img src au clic

J'ai parcouru le forum à la recherche d'un problème particulier, mais toutes les solutions que j'ai trouvées ne fonctionnent pas pour mon problème.

J'ai une image sur le côté gauche. Sur le côté droit, j'ai des mots différents. Ainsi, lorsque je clique sur un nom particulier, je souhaite que l’image change en une image quelconque de mon dossier d’images. En gros, je veux que la source de l'image change. Voici le code de mon index:

<div id="picture_here">
     <img src="images/mtkili.png" id="picture"/>
</div>

<div id="about">
     <div id="mtl">Mtl</div>
</div>

<div id="about_2">
     <div id="contact">SF</div>
</div>

et voici deux formules de jqueries que j'ai essayées:

$('#mtl').click(function(){
    $('#picture').attr()({
        'src':'images/short.png'
    })          
})

et:

$('#mtl').click(function(){
   $('#picture').attr('src', 'images/short.png');
});
jqueryimagesrc
11
Midevil Chaos

Votre deuxième tentative est correcte. Voici le jsFiddle qui fonctionne: http://jsfiddle.net/MEHhs/

Donc, le code devrait être:

html:

<div id="picture_here">
     <img src="http://www.sbtjapan.com/img/FaceBook_img.jpg" id="picture"/>
</div>

<div id="about">
     <div id="mtl">Mtl</div>
</div>

<div id="about_2">
     <div id="contact">SF</div>
</div>​

js:

$('#mtl').click(function(){
    $('#picture').attr('src', 'http://profile.ak.fbcdn.net/hprofile-ak-ash3/41811_170099283015889_1174445894_q.jpg');
    });

J'ai ajouté des images existantes trouvées sur Google.

15
gabitzish

démo jsBin

  • Ajouter une classe à tous vos déclencheurs
  • créer des images appelées: mtl.png et contact.png

et utilise:

<div>
     <div class="button" id="mtl">Mtl</div>
</div>
<div>
     <div class="button" id="contact">SF</div>
</div>

$('.button').click(function(){
   var idToSRC = 'images/'+ this.id +'.png';
   $('#picture').attr('src', idToSRC);
});

Bien que ce qui précède ne soit pas convivial, il y a une certaine latence dans le chargement de nouvelles images ...
Une meilleure approche consisterait à utiliser une seule image (ainsi appelée) Sprite, contenant toutes vos images souhaitées, à la définir comme image d'arrière-plan DIV et à changer la position de l'arrière-plan de cette DIV " sur clic!

UTILISATION DE SPRITES demo 2

Stockez la position gauche souhaitée dans un attribut de données:

<div id="picture"></div>
<div>
     <div class="button" data-bgpos="68" id="mtl">Mtl</div>
</div>
<div>
     <div class="button" data-bgpos="100" id="contact">SF</div>
</div>

CSS:

#picture{
  width:25px;
  height:25px;
  background:url(/images/Sprite.png) no-repeat;
}

Récupérez ces données et déplacez le packgroundPosition:

$('.button').click(function(){
  var bgpos = $(this).data('bgpos');
  $('#picture').css({backgroundPosition: -bgpos+' 0'})
});
4
Roko C. Buljan

Au lieu d’ajouter des écouteurs d’événements à chaque classe de liens, vous pouvez simplement les utiliser comme fonction inline sur n’importe quel lien.

function changeurl(theurl){
    $('.myimage').attr('src', theurl);
}

https://jsfiddle.net/rabiee3/ftkuub3j/

1
Rabie Mohamed

Tout semble bien pour la deuxième version. Assurez-vous de bien envelopper vos appels DOM dans la fonction de préparation du document, qui peut être écrite en tant que ...

$(document).ready(function() {
    ...
});

Ou...

$(function() {
    ...
});

Alors vous obtenez ...

$(function() {
    $('#mtl').click(function(){
        $('#picture').attr('src', 'images/short.png');
    });
});
1
Stuart Wakefield

La seconde fonctionne bien mais vous devez utiliser un chemin explicite au lieu d'un chemin relatif:

$('#mtl').click(function(){
$('#picture').attr('src', '/images/short.png');
});
0
A_Nablsi