Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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.
avatar

Self
Membre actif

Masculin
Messages : 3717
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 .
avatar

Self
Membre actif

Masculin
Messages : 3717
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.
avatar

Adam_sfp
Membre actif

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

http://antonyadam.1fr1.net/
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