changer img src sur clic

J'ai cherché sur le forum pour une question en particulier, mais toutes les solutions que j'ai trouvé ne fonctionne 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. Donc, Quand je clique sur un nom particulier, je veux que l'image de modifier à tout ce que l'image que j'ai dans mon dossier image. En fait, je cherche la source de l'image à modifier. 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 jqueries formules que j'ai essayé:

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

et:

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

source d'informationauteur Midevil Chaos

  1. 14

    Votre deuxième tentative est la bonne. Ici, c'est le travail jsFiddle: http://jsfiddle.net/MEHhs/

    De sorte que 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é quelques images trouvées sur google.

  2. 4

    jsBin démo

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

    et d'utilisation:

    <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);
});

    Alors que le ci-dessus ne seront pas convivial cause il y a une certaine latence dans le chargement de nouvelles images...
    Une meilleure approche serait d'utiliser un seul (soi-disant) sprite image, contenant toutes les images de votre choix, de le définir comme un DIV de l'image d'arrière-plan et d'en changer le DIV "background-position" sur clic!

    À l'AIDE de SPRITES démo 2

    Magasin de votre choix à gauche 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;
}

    Extraire les données et de déplacer le packgroundPosition:

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

    Il semble tout à fait bonne pour la deuxième version, assurez-vous que vous êtes d'emballage de votre DOM appels dans le document de prêt de la fonction, qui peut être écrit comme...

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

    Ou...

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

    De sorte que vous obtenez...

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

    Au lieu d'ajouter des écouteurs d'événement à chaque maillon de la classe, vous pouvez simplement l'utiliser comme une fonction en ligne sur n'importe quel lien

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

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

  5. 0

    La seconde travaille très bien, mais vous devez utiliser le chemin d'accès explicite à la place de chemin relatif:

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