[HTML et CSS] Images survolées
Résolu
Elerra
Messages postés
65
Statut
Membre
-
Elerra Messages postés 65 Statut Membre -
Elerra Messages postés 65 Statut Membre -
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 :
Merci a tous ceux qui m'aideront :)
Bonne journée
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
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? ✓ - Forum Python
- Br html ✓ - Forum Webmastering
- Images enregistrées - Forum Blender
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
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
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'">
à 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'">
