Onmouseover=Image 1, onmouseout= Image 2 un code qui marche ?

Anonymous · 1 Avril 2012

Salut, j'aimerais faire un truc tout simple :

J'ai 2 images;

Mon image 1 est là par défaut.
Lorsque je passe la souris sur l'image 1, l'image 2 apparaît.
Et dès que la souris sort de l'image 2, c'est à nouveau l'image 1 qui apparaît.

J'aimerais que l'image 2 soit cliquable et redirige vers un lien hypertexte.

J'ai essayé plusieurs bouts de codes trouvés sur internet comme :

Code:

<a href="Mon lien" title="lien"><img src="Mon image 1" alt="Image ^^" style="border:0px;" 

onmouseover="this.src='Mon image 2';" onmouseout="document.NOM.src="Mon image 1"></a>

Mais ça ne marche pas comme je le veux, car dès que je sors la souris de l'image 2....l'image d'origine ne revient pas donc je me retrouve avec l'image 2 qui reste là comme ça.

J'espère que quelqu'un pourra m'aider, merci.

sonn · 1 Avril 2012

Code:

<a href="#" title="lien">
<img src="{LIEN IMAGE1}" alt="Image 1" style="border:0px;"
onmouseover="this.src="{LIEN IMAGE2};alt.src="Image 2"
onmouseover="this.src="{LIEN IMAGE1};alt.src="Image 1"/>
</a>

Essaye ça, mais ça fait longtemps que j'ai pas toucher du js ^^"

Anonymous · 1 Avril 2012

ca ne marche pas sonn ^^
je n'ai même pas la seconde image qui s'affiche .

Je vois uniquement l'image 1 qui reste fixe.

(j'ai biensur corrigé le "onmouseover" en "onmouseout" dans le code que tu m'a donné) et rien n'y fait... c'est chiant ce truc ^^

zeb · 1 Avril 2012

Code:

<img 
   src="http://www.example.com/images/image-out.jpg" 
   alt="text alternatif" 
   class="truc" 
   id="monImage"
   onmouseover="document.getElementById('monImage').src='http://www.example.com/images/image-over.jpg';"
   onmouseout="document.getElementById('monImage').src='http://www.example.com/images/image-out.jpg';"
/>

Je met des sauts de ligne pour que ce soit plus clair à la lecture.
vérifie que le onmouseover et out est bien pris en compte par tous les navigateurs sur une image (j'ai pas vérifié) si c'est pas le cas déporte les sur le lien qui doit le prendre en compte.

sonn · 1 Avril 2012

Fonctionnel car tester

Code:

<!DOCTYPE html>
<html>
	<body>
		<a href="http://ton-lien.com" >
			<img id="myDiv" src='http://ssl.gstatic.com/gb/images/j_f11bbae9.png'
			onmouseover="this.src='https://www.webrankinfo.com/images/wri/webrankinfo-logo.png';"
			onmouseout="this.src='http://www.siteduzero.com/images/designs/2/zozor_bg.png';"/>
		</a>
	</body>
</html>

Trois src :
le premier c'est l'image de départ qui n'est affiché qu'une fois,
le deuxieme c'est l'image au survol,
le troisieme c'est l'image quand on survole plus

ça fait le yoyo entre le 2 et le 3 après

zeb · 1 Avril 2012

TEST210 a dit:
ca ne marche pas sonn ^^

Le problème de javascript c'est qu'une erreur fait planter tous les scripts je pense que alt.src="Image 2" ne fonctionne pas car il ne me semble pas que l'élément "alt" (qui n'est pas complètement défini d'ailleurs) ai un attribut "src".

Leonick · 1 Avril 2012

en plus, ça devrait être le title qui devrait être modifié, car même si le alt affiche une infobulle sur IE, ça ne fonctionne pas avec FF et ça ne correspond pas à son réel rôle w3c

Anonymous · 2 Avril 2012

Le code de sonn marche parfaitement bien ! merci beaucoup !
Maintenant, comment puis-je faire (AVEC UNE SEULE IMAGE cette fois) pour que dès que l'on passe la souris dessus, l'image change de position ?

L'exemple exact de ce que je voudrais réaliser : les boutons socials en haut à droite du site http://www.commentcamarche.net/bouyguestelecom-bbox/

merci d'avance les copains !

sonn · 2 Avril 2012

tester et fonctionnel

cependant essaye d'apprendre, plutot que demander à chaque fois :/ tu en retireras plus de plaisir

Code:

    <!DOCTYPE html>
    <html>
       <body>
<style>
#myDiv
{
position:absolute;
}
</style>
          <a href="http://ton-lien.com" >
             <img id="myDiv" src='http://ssl.gstatic.com/gb/images/j_f11bbae9.png'
             onmouseover="this.src='https://www.webrankinfo.com/images/wri/webrankinfo-logo.png';this.style.top='150px';"
             onmouseout="this.src='http://www.siteduzero.com/images/designs/2/zozor_bg.png';this.style.top='100px';"/>
          </a>
       </body>
    </html>

chopoalc · 19 Octobre 2012

merci sonn ça marche parfaitement et à la première !!!