Javascript - Changer src à onmouseover et onmouseout

Question

Je veux faire cela onmouseover changer l'image et surmouseout il renvoie l'image par défaut. J'utilise ce code:

<div class="home-social-share"> 
<div style="margin-right:15px;width:11px;float:left;"> 
    <a href="javascript:void(0)" onclick="window.open('http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>','Condividi su Facebook','height=300, width=750,scrollbars=no, resizable=yes')"> 
     <img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshareoff.png" alt="Condividi su Facebook" title="Condividi su Facebook" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshare.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/fbshareoff.png'"> 
    </a> 
</div> 
<div style="float:left;margin-right:15px;"> 
<a href="javascript:void(0)" onclick="window.open('http://twitter.com/share?text=<?php the_title(); ?> &bull; Prima Pagina Online&amp;url=<?php the_permalink(); ?>','Condividi su Twitter','height=300, width=500,scrollbars=no, resizable=yes')"> 
     <img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-shareoff.png" alt="Condividi su Twitter" title="Condividi su Twitter" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-share.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/tt-shareoff.png'" /> 
</a> 
</div> 
<div style="float:left;"> 
    <a href="<?php the_permalink();?>/#disqus_thread"> 
     <img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png" alt="Commenta l'articolo" title="Scrivi un commento sull'articolo" onmouseover="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil.png'" onmouseout="this.src='http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png'" /> 
    </a> 
</div> 

Maintenant, il fonctionne les fonctions onclick mais les images reste le même, de sorte que le onmouseover et onmouseout ne fonctionne pas.

Merci

Answer 1

Je ne suis pas sûr que votre utilisation de Jquery ou non, donc je vais inclure des exemples des deux.

<img id="change" src="picture" alt="picture.jpg"> 

Jquery -

$('#change').on("mouseenter", function() { 
    $(this).attr('src', 'picture2'); 
}).on("mouseleave", function() { 
    $(this).attr('src', 'picture'); 
}); 

Javascript -

document.getElementById('change').addEventListener("onmouseover", function() { 
    this.src = 'picture2'; 
}).addEventListener("onmouseout", function() { 
    this.src = 'picture'; 
}); 

Cela devrait vous y aller!

Answer 2

Utilisez les onmouseover et onmouseout événements, car cela fonctionne toujours.

Exemple:

<img src="picture" onmouseover="this.src='picture2'" onmouseout="this.src='picture3'"> 

Voir aussi http://helplogger.blogspot.be/2012/05/create-rollover-image-effect-change.html

Answer 3

Le code de votre jsfiddle et celui de votre site Web présentent certaines différences.

Ce code est de votre site Web:

<img src="http://www.primapaginaonline.it/wp-content/themes/pponline/images/pencil-off.png?b33912" alt="Commenta l'articolo" title="Scrivi un commento sull'articolo" onmouseover="this.src=" http:="" www.primapaginaonline.it="" wp-content="" themes="" pponline="" images="" pencil.png?b33912""="" onmouseout="this.src=" pencil-off.png?b33912""=""> 

C'est facile de se perdre avec tout ce code dans une balise simple, mais si vous regardez de près, vous verrez quelques-uns des problèmes.

Tout d'abord, vous avez à l'intérieur des guillemets doubles guillemets doubles:

onmouseout="this.src=" pencil-off.png?b33912""="" 

Et certains de ces guillemets doubles ne sont pas censés être là, ex. http:="" dans

onmouseover="this.src=" http:="" www.primapaginaonline.it="" 

Nettoyez-le et cela fonctionnera!