[HTML et CSS] Images survolées

[Résolu/Fermé]
Signaler
Messages postés
63
Date d'inscription
mardi 10 novembre 2009
Statut
Membre
Dernière intervention
28 mai 2018
-
Messages postés
63
Date d'inscription
mardi 10 novembre 2009
Statut
Membre
Dernière intervention
28 mai 2018
-
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
Messages postés
335
Date d'inscription
jeudi 3 juin 2010
Statut
Membre
Dernière intervention
28 novembre 2012
29
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'">
Messages postés
63
Date d'inscription
mardi 10 novembre 2009
Statut
Membre
Dernière intervention
28 mai 2018
3
Merci beaucoup, ça fonctionne parfaitement ;-)