[HTML et CSS] Images survolées

Résolu/Fermé
Elerra Messages postés 63 Date d'inscription mardi 10 novembre 2009 Statut Membre Dernière intervention 28 mai 2018 - 13 juin 2010 à 12:08
Elerra Messages postés 63 Date d'inscription mardi 10 novembre 2009 Statut Membre Dernière intervention 28 mai 2018 - 13 juin 2010 à 12:36
Bonjour,
J'essaie de faire la page d'accueil de mon site, et de faire la barre de navigation.
J'ai commencer, mais j'ai mis des images survolées, sauf que quand je survole une des images avec la souris, l'image qui est censée apparaître, apparaît sur une autre image...Je ne sais pas si je suis très claire...

Voici le code de ma page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body><body bgcolor=#91fcff>
   <style type="text/css">
   body
{
background:  url('http://img691.imageshack.us/img691/3571/fond3i.png')  #91fcff no-repeat center top;
}
   </style>
   <!-- Le menu horizontal -->
               
           <!-- début script image 1 Accueil -->
<center>
<a href="LIEN1"><img id='img' src="Accueil.png" border=0
onmouseover="document.getElementById('img').src='Accueil2.png'"
onmouseout="document.getElementById('img').src='Accueil.png'"></a>

<!-- début script image 2 -->
<a href="LIEN2"><img id='img' src="urgences.png" border=0
onmouseover="document.getElementById('img').src='urgences2.png'"
onmouseout="document.getElementById('img').src='urgences.png'"></a>

<!-- début script image 3 -->
<a href="LIEN3"><img id='img' src="annonces.png" border=0
onmouseover="document.getElementById('img').src='annonces2.png'"
onmouseout="document.getElementById('img').src='annonces.png'"></a></center>
</body>
</html>



Merci a tous ceux qui m'aideront :)

Bonne journée

3 réponses

Le principe d'un ID, c'est qu'il est unique.
La tu utilise 3 fois le meme ID "img" et donc PHP prend an conte que le dernier de tes ID => le 3eme

renomme img en img_1, img_2 et img_3 pour avoir un tout autre resultat
0
louloute300 Messages postés 335 Date d'inscription jeudi 3 juin 2010 Statut Membre Dernière intervention 28 novembre 2012 29
Modifié par louloute300 le 13/06/2010 à 12:19
Le script m'a l'air bon...
à un détail prêt:
Remplace peut être img par le name des balises de l'img que dans laquel tu souhaite voir apparaitre l'image...
sinon remplacer les onmouseover et onmouseout par, onmouseover="this.src='Accueil2.png'" onmouseout="this.src='Accueil.png'"

As tu vérifier l'adresse de tes images?

<img id='img' src="Accueil.png" border=0
onmouseover="document.getElementById('img').src='Accueil2.png'"
onmouseout="document.getElementById('img').src='Accueil.png'">
0
Elerra Messages postés 63 Date d'inscription mardi 10 novembre 2009 Statut Membre Dernière intervention 28 mai 2018 3
13 juin 2010 à 12:36
Merci beaucoup, ça fonctionne parfaitement ;-)
0