jQuery placez un lien de permuter l'image

Je veux faire de la suivre, si un utilisateur passez la souris sur un lien que l'image de swap avec une image avec des " - " à la fin.

Mais comment puis-je obtenir le swap chose sur l'image quand j'ai passez un tag?

Code HTML:

<div>
    <a href="#">
        <img src="image.jpg" alt="" />
        Here some caption
    </a>
</div>

Je ne peux pas placer l'url de l'image dans l'en-tête...

J'ai essayé le plugin jQuery 'canvasSwap' un déclencheur avec $("une.swap:hover img').canvasSwap(); mais cela n'a pas fonctionné... de Même pour certains autres plugins.
Avez-vous essayé d'utiliser juste le CSS?

OriginalL'auteur Maanstraat | 2013-02-27

  1. 12
    $(function () {
    $('a img').hover( function () {
        $(this).attr('src', $(this).attr('src').replace(/\.jpg/, '-on.jpg') );
    });
});

    Lire le jQuery docs sur remplacer et attr.

    Cela fera la même chose que le CanvasSwap plugin. Il ne fonctionne que lorsque vous survolez l'image de soi... pas lorsque vous placez le pointeur de la div en entier!
    c'est une bonne solution aussi, il suffit de changer le $('img') $('div'), $(this) $(this).find('img')
    C'est bon, mais si vous passez plus d'une fois il remplacera imagename-on.jpg avec imagename-on-on.jpg et ainsi de suite. Pour éviter d'image pas trouvé d'ajouter jquery out gestionnaire pour hover(). Lire les docs..api.jquery.com/hover

    OriginalL'auteur hjpotter92

  2. 6

    De changer src de votre image tout juste attr:

    $('img').attr("src", "image2.jpg");

    Vous devez utiliser passez la souris:

    $("a").hover(
function() {
    $(this).find('img').attr("src", "image2.jpg");
},
function() {
    $(this).find('img').attr("src", "image.jpg");
}
);
    $('a:hover img').attr("src", "-on.jpg"); si vous faites cela, vous n'obtiendrez pas image-on.jpg sur un hover je pense...
    Vous ne pouvez pas faire cela, voir mon edit 🙂

    OriginalL'auteur Eli

  3. 2

    Vous pouvez utiliser le DOM 'mouseover' événement sur l'étiquette et joindre un rappel (puis à l'intérieur, vous pourrez changer l'URL de l'image)

    modifier, des exemples de code:

    <div>
<a id="myLink" href="#">
    <img id="myImg" src="image.jpg" alt="" />
    Here some caption
</a>
</div>

    en JS:

    var img = document.getElementById('myImg');
document.getElementById('myLink').onmouseover = function(){
    //manipulate the image source here.
    img.src = img.src.replace(/\.jpg/, '-on.jpg');
}

    Vous faudra alors utiliser onmouseout de mettre l'image d'origine en arrière.

    Salut Greg, voir ma dernière ligne au bas de la rubrique de commencer: je ne peux pas placer l'url de l'image dans l'en-tête du code html de...
    édité avec Dream Eater expression régulière
    remarque c'est du code JS, ce ne doit pas être dans l'en-tête du code HTML 🙂 mais je vois ce que tu veux dire - vous ne pouvez pas coder en dur l'Url.
    Presque! :-)... le passage de la souris est maintenant le bon mais quand vous partez avec votre curseur, puis l'image "normale" est de ne pas revenir? Et est-il possible de le faire avec une classe?
    voir la fin de mon post: vous devez faire l'opération inverse avec onmouseout. Et une classe CSS ne peut pas modifier l'URL de l'image autre que de les remplacer entièrement, autant que je sache.

    OriginalL'auteur Greg