[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

A voir également:

[HTML et CSS] Images survolées
Editeur html - Télécharger - HTML
Des images - Guide
Image cliquable html ✓ - Forum Réseaux sociaux
Images enregistrées ✓ - Forum Bluetooth
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? ✓ - Forum Photoshop

3 réponses

Réponse 1 / 3

Siluni
13 juin 2010 à 12:15

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

Réponse 2 / 3

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'">

Réponse 3 / 3

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 ;-)

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)

la balise ou

&nbsp ; Quelle Fonction ?

ou ou

voir ses images enregistrés