en utilisant jquery, comment changer une image en survolant des liens?

Question

J'ai une liste de liens (un menu texte), et j'ai besoin de changer une image dans une autre zone lorsque chaque lien est plané ...

les images doivent être montrées au même endroit, disons un 100x100 zone à droite ... une idée pour y parvenir?

chaque lien peut-il avoir le src des images? aucune idée de comment le faire :(

Answer 1

Pas une réponse complète, mais cela vous guidera vers la solution réelle.

$("a") 
    .hover(function(){ $("#some-div").css("background", "my-image.jpg")); 

Answer 2

Vous pouvez stocker le src de l'image dans la balise rel sur l'a?

<a href="#" rel="../images/myPicture.jpg">Anchor Link</a> 

Ensuite, utilisez la solution de elcuco mais avec un changement mineur

$("a") 
    .hover(function(){ $("#some-div").css("background", $(this).attr('rel'))); 

Answer 3

avec le code HTML suivant:.

<ul> 
    <li><a href="#" id="link1">Link Number 1</a></li> 
    <li><a href="#" id="link2">Link Number 2</a></li> 
    <li><a href="#" id="link3">Link Number 3</a></li> 
    <li><a href="#" id="link4">Link Number 4</a></li> 
    <li><a href="#" id="link5">Link Number 5</a></li> 
</ul> 
<ul> 
    <li><img src="image1.jpg" /></li> 
    <li><img src="image2.jpg" /></li> 
    <li><img src="image3.jpg" /></li> 
    <li><img src="image4.jpg" /></li> 
    <li><img src="image5.jpg" /></li> 
</ul> 

Utilisez le code JavaScript suivant (avec jQuery):

$(function(){ 
    $(".images img").hide(); 
    $(".links a").hover(function(){ 
    $(".images img").hide(); 
    $("#image"+/(\d+)$/.exec(this.id)[1]).show(); 
    }, function(){ 
    $(".images img").hide(); 
    }); 
}); 

Answer 4

On suppose que chaque Retient le href de l'image à afficher et est identifiable par classe, par exemple link-image. En outre, disons que la zone d'affichage est configurée avec un ID fixe, imageDisplay.

$('a.link-image').hover(
    function() { 
     $('#imageDisplay').children().remove(); 
     $('<img src="' + $(this).attr('href') + '" alt="" />') 
      .css({ height: 100, width: 100 }) 
      .appendTo('#imageDisplay'); 
    }, 
    function() { 
     $('#imageDisplay').children().remove(); 
     $('<span>No image available</span>').appendTo('#imageDisplay'); 
    } 
); 

Vous pouvez réellement utiliser le plugin hoverIntent pour éviter que la souris clignote se déplace sur les liens.

Normalement, vous associeriez ceci à un gestionnaire de clic sur les liens qui désactive le comportement de lien par défaut.

$('a.link-image').click(function() { return false; }); 

Notez que vous pouvez simplement chaîner le gestionnaire de clic sur le gestionnaire de survol.

Answer 5

Si n'est pas sémantique, et seulement pour la présentation, j'utiliserais des classes et CSS.

$('.imageList li').hover(
function() { 
    $('#imageDisplay').addClass($(this).attr("class");); 
}, 
function() { 
    $('#imageDisplay').removeClass($(this).attr("class");); 
} 
); 

MARKUP

<ul class="imageList"> 
    <li class="deer">Show me a deer</li> 
    <li class="cow">Show me a cow</li> 
</ul> 
<div id="imageDisplay" /> 

CSS

#imageDisplay { 
    width:200px; 
    height:200px; 
} 
div.deer { 
    background:red; 
} 
div.cow { 
    background:blue; 
}