HTML "Mouseover" sur une image

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu HTML "Mouseover" sur une image

Message par Paidon le Jeu 8 Aoû 2013 - 16:55

Bonjour,
Je suis en train de modifier la description d'un forum pour y afficher des images représentant les sous-forums. J'ai vu qu'il était possible de faire réagir l'image lorsque l'on passe la souris dessus à l'aide du code html suivant :
<img src="image1.png" name="image" onmouseover="image.src='image2.png'" onmouseout="image.src='image1.png'" onmousedown="image.src='image3.png'" />

Ayant trois liens à placer, j'ai donc empilé trois fois ce code, avec deux images différentes à chaque fois : une image src/onmouseout et une image onmouseover/onmousedown :

Code:
<a href="http://personofintetest.weshforum.com/f23-fanfictions"><img src="http://i74.servimg.com/u/f74/17/87/12/63/fanfic10.png" name="image" onmouseover="image.src='http://i74.servimg.com/u/f74/17/87/12/63/fanfic11.png'" onmouseout="image.src='http://i74.servimg.com/u/f74/17/87/12/63/fanfic10.png'" onmousedown="image.src='http://i74.servimg.com/u/f74/17/87/12/63/fanfic11.png'"></a>
<a href="http://personofintetest.weshforum.com/f17-creations-graphiques"><img src="http://i74.servimg.com/u/f74/17/87/12/63/fanart10.png" name="image" onmouseover="image.src='http://i74.servimg.com/u/f74/17/87/12/63/fanart11.png'" onmouseout="image.src='http://i74.servimg.com/u/f74/17/87/12/63/fanart10.png'" onmousedown="image.src='http://i74.servimg.com/u/f74/17/87/12/63/fanart11.png'"></a>
<a href="http://personofintetest.weshforum.com/f17-creations-graphiques"><img src="http://i74.servimg.com/u/f74/17/87/12/63/vidaos10.png" name="image" onmouseover="image.src='http://i74.servimg.com/u/f74/17/87/12/63/vidaos11.png'" onmouseout="image.src='http://i74.servimg.com/u/f74/17/87/12/63/vidaos10.png'" onmousedown="image.src='http://i74.servimg.com/u/f74/17/87/12/63/vidaos11.png'"></a>
Les images finissant par 10.png sont les images de base :


Les images finissant par 11.png sont les images mouseover :


Ce code fonctionne lorsqu'il n'y a qu'une image, mais bizarrement ne fonctionne plus lorsque l'on met 2 ou 3 images à la suite.

Pouvez-vous m'aider ?
Merci d'avance.


Dernière édition par Paidon le Ven 16 Aoû 2013 - 19:19, édité 1 fois

Paidon
*

Masculin
Messages : 35
Inscrit(e) le : 16/01/2013

http://personofinterest.fra.co/
Paidon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML "Mouseover" sur une image

Message par Self le Jeu 8 Aoû 2013 - 17:17

Bonjour .

Pourquoi ne pas faire plus simple:
Code:
<a class="texte" style="color:red" href="http://personofintetest.weshforum.com/f23-fanfictions"><img MON IMAGE></img>Mon texte</a>
Et d'ensuite mettre un CSS:
Code:
.texte :hover{
color:black;}
Cordialement Smile.

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML "Mouseover" sur une image

Message par Paidon le Jeu 8 Aoû 2013 - 17:40

Ca fonctionne effectivement, mais je préférais avoir une image qui me permette d'y placer le texte comme je le souhaite...

Paidon
*

Masculin
Messages : 35
Inscrit(e) le : 16/01/2013

http://personofinterest.fra.co/
Paidon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML "Mouseover" sur une image

Message par Self le Jeu 8 Aoû 2013 - 17:47

Il suffit de remplacé:
Code:
<a class="texte" style="color:red" href="http://personofintetest.weshforum.com/f23-fanfictions"><img MON IMAGE></img>Mon texte</a>
par:
Code:
<a class="texte" style="color:red" href="http://personofintetest.weshforum.com/f23-fanfictions"><img MON IMAGE></img><p class="position">Mon texte</p></a>
et d'ajouté ceci au CSS:
Code:
.position{
margin-top:-10px;
margin-left: 5px;}
Cordialement Smile .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML "Mouseover" sur une image

Message par Paidon le Ven 9 Aoû 2013 - 17:53

Je te remercie pour tes réponses, mais en fait j'aimerais surtout savoir pourquoi mon code ne fonctionne pas avec plusieurs images d'affilée.

Paidon
*

Masculin
Messages : 35
Inscrit(e) le : 16/01/2013

http://personofinterest.fra.co/
Paidon a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML "Mouseover" sur une image

Message par Paidon le Mar 13 Aoû 2013 - 22:34

UP.

Paidon
*

Masculin
Messages : 35
Inscrit(e) le : 16/01/2013

http://personofinterest.fra.co/
Paidon a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: HTML "Mouseover" sur une image

Message par Adam_sfp le Mar 13 Aoû 2013 - 23:22

Bonsoir

il faudrait mettre un autre nom pour les suivantes

exemple
Code:
 name="image1"
et aussi
Code:
onmouseover="image1.src
Code:
onmouseout="image1.src
Code:
onmousedown="image1.src
Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: HTML "Mouseover" sur une image

Message par Paidon le Ven 16 Aoû 2013 - 19:19

C'est ça. Merci beaucoup !

Paidon
*

Masculin
Messages : 35
Inscrit(e) le : 16/01/2013

http://personofinterest.fra.co/
Paidon a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum