HTML "Mouseover" sur une image
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
HTML "Mouseover" sur une image
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 :
![HTML "Mouseover" sur une image Fanart10](https://i.servimg.com/u/f74/17/87/12/63/fanart10.png)
![HTML "Mouseover" sur une image Vidaos10](https://i.servimg.com/u/f74/17/87/12/63/vidaos10.png)
Les images finissant par 11.png sont les images mouseover :
![HTML "Mouseover" sur une image Fanart11](https://i.servimg.com/u/f74/17/87/12/63/fanart11.png)
![HTML "Mouseover" sur une image Vidaos11](https://i.servimg.com/u/f74/17/87/12/63/vidaos11.png)
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.
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>
![HTML "Mouseover" sur une image Fanfic10](https://i.servimg.com/u/f74/17/87/12/63/fanfic10.png)
![HTML "Mouseover" sur une image Fanart10](https://i.servimg.com/u/f74/17/87/12/63/fanart10.png)
![HTML "Mouseover" sur une image Vidaos10](https://i.servimg.com/u/f74/17/87/12/63/vidaos10.png)
Les images finissant par 11.png sont les images mouseover :
![HTML "Mouseover" sur une image Fanfic11](https://i.servimg.com/u/f74/17/87/12/63/fanfic11.png)
![HTML "Mouseover" sur une image Fanart11](https://i.servimg.com/u/f74/17/87/12/63/fanart11.png)
![HTML "Mouseover" sur une image Vidaos11](https://i.servimg.com/u/f74/17/87/12/63/vidaos11.png)
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
Re: HTML "Mouseover" sur une image
Bonjour .
Pourquoi ne pas faire plus simple:
.
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>
- Code:
.texte :hover{
color:black;}
![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif)
Re: HTML "Mouseover" sur une image
Ca fonctionne effectivement, mais je préférais avoir une image qui me permette d'y placer le texte comme je le souhaite...
Re: HTML "Mouseover" sur une image
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>
- 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>
- Code:
.position{
margin-top:-10px;
margin-left: 5px;}
![Smile](https://2img.net/i/fa/i/smiles/icon_smile.gif)
Re: HTML "Mouseover" sur une image
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.
Re: HTML "Mouseover" sur une image
Bonsoir
il faudrait mettre un autre nom pour les suivantes
exemple
il faudrait mettre un autre nom pour les suivantes
exemple
- Code:
name="image1"
- Code:
onmouseover="image1.src
- Code:
onmouseout="image1.src
- Code:
onmousedown="image1.src
Re: HTML "Mouseover" sur une image
C'est ça. Merci beaucoup !
![-](https://2img.net/i/empty.gif)
» Problème de mouseover?
» mouseover inactif sous Chrome
» A la recherche d'un code mouseover particulier
» HTML décaler une image dans la signature
» Balise Opacité Html Image
» mouseover inactif sous Chrome
» A la recherche d'un code mouseover particulier
» HTML décaler une image dans la signature
» Balise Opacité Html Image
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum