HTML "Mouseover" sur une image

[Paidon]

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.

[Self]

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 .

[Paidon]

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

[Self]

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 .

[Paidon]

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]

UP.

[Adam_sfp]

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.

[Paidon]

C'est ça. Merci beaucoup !