Jquery - quand un lien est plané, changer une image dans un DIV séparé

Question

Je suis nouveau à Jquery et j'ai du mal à obtenir les éléments suivants.

J'ai une page Web avec deux colonnes. Dans la colonne de gauche se trouve une liste non-ordonnée de liens.

Dans la colonne de droite est un div.

Ce que je veux faire est d'avoir la div dans la colonne de droite, changer son image lorsqu'un utilisateur passe sur un lien dans la colonne de gauche

par exemple.

utilisateur passe lien 1 Les changements div pour afficher l'image 1

utilisateur passe lien 2 div affiche l'image 2

Je ne peux pas sembler le faire fonctionner, peu importe ce que je fais.

Toute aide serait grande grâce

Answer 1

Juste une solution vraiment rapide, vous pourriez changer la source de l'image au lieu de la div.

<a href="javascript:;" class="mylink" id="link1">link1</a>  
<a href="javascript:;" class="mylink" id="link2">link2</a> 
<div class="mydiv" ></div> 

$(".mylink").bind("mouseover",function(){ 
    if (this.id == 'link1') 
    { 
    $(".mydiv")[0].innerHTML = "<img src='1.png'.. />"; 
    } 
    else 
    { 
    $(".mydiv")[0].innerHTML = "<img src='2.png' .. />"; 
    } 
}).bind("mouseout",function(){ 

    $(".mydiv")[0].innerHTML = ""; 
}); 

PreviewSource

Answer 2

Cela utilise HTML5 data attributes pour stocker l'emplacement du resouce d'image.

<ul> 
    <li><a href="foos.html" data-image-src="images/foo.png">What is a foo?</a></li> 
    <li><a href="bars.html" data-image-src="images/bar.jpg">Find a good bar!</a></li> 
</ul> 

Je vais même mandater un préchargeur d'image rapide pour faire bonne mesure.

$(function() { 
    $('ul a') 
     .mouseover(function() { 
      $('div img').attr('src', this.getAttribute('data-image-src')); 
     }) 
     .each(function() { 
      new Image().src = this.getAttribute('data-image-src'); 
     }); 
} 

Il ne faut pas faire trop d'efforts pour créer un joli effet de fondu.