easytype Posté 7 Avril 2009 Partager Posté 7 Avril 2009 Bonsoir à tous ! Aujourd'hui, j'me suis lancé, sans trop connaître dans la fonction "Hover" J'ai ressui à avoir le résultat attendu mais, sous IE7, cela marche bien, et sous MF3, il y'a un bug : http://jessy.houcke.free.fr/test.html Une idée ? Merci de votre aide. Lien vers le commentaire Partager sur d’autres sites More sharing options...
libelinfo Posté 7 Avril 2009 Partager Posté 7 Avril 2009 je comprend pas ce que tu cherches à faire ? juste un changement d'image au passage de la souris ou quelque chose de plus compliqué ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
easytype Posté 7 Avril 2009 Auteur Partager Posté 7 Avril 2009 Arf, désolé j'ai été trop vite Sous Firefox, quand on passe sous les 3 images, la ligne d'image réaparait. Lien vers le commentaire Partager sur d’autres sites More sharing options...
libelinfo Posté 7 Avril 2009 Partager Posté 7 Avril 2009 oui ça j'ai bien vue mais je ne comprend toujours pas ce que tu cherches à obtenir..... ' quand je passe ma souris sur les blocs du haut, on a bien un effet de "rollover" avec l'image qui change mais je ne vois pas bien ce que viennent faire les liens 4, 5 et 6 ou alors j'ai vraiment besoin de vacances Lien vers le commentaire Partager sur d’autres sites More sharing options...
easytype Posté 7 Avril 2009 Auteur Partager Posté 7 Avril 2009 C'est moi qui m'éxprime mal Justement, les liens 4, 5 & 6 me gènent, c'est eux qui je ne voit pas ce qu'ils font là Lien vers le commentaire Partager sur d’autres sites More sharing options...
libelinfo Posté 7 Avril 2009 Partager Posté 7 Avril 2009 et.. les supprimer tout simplement ?.... Lien vers le commentaire Partager sur d’autres sites More sharing options...
easytype Posté 7 Avril 2009 Auteur Partager Posté 7 Avril 2009 Oui, j'm'en doute xD Mais je ne trouve pas ces lignes :/ Voulez vous les lignes de codes ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
libelinfo Posté 7 Avril 2009 Partager Posté 7 Avril 2009 ça pourrait aider vi Lien vers le commentaire Partager sur d’autres sites More sharing options...
easytype Posté 7 Avril 2009 Auteur Partager Posté 7 Avril 2009 <!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" lang="fr"><head><title>Un menu avec multiples survols sans preload d'images</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><style type="text/css"><!--/* CSS issu des tutoriels css.alsacreations.com */body {background: #303036;}ul, li { /* utilisation de liste pour le menu */list-style-type: none; /* suppression des puces de liste */margin:1;padding:0;}ul {position: absolute; /* positionnement pour IE5 et IE5.5 */top: 1;left: 210px;background: transparent url(abf.png) top left repeat; /* arrière-plan général du menu */width: 573px;height: 146px; }li {float: left;}li a { /* dimensions et définitions des boutons */display: block; /* mise en block de <a> pour lui donner des dimensions */height: 147px; width: 191px;}li a:hover {background: transparent url(abf.png) top left no-repeat;}a#lien1:hover {background-position: -0px 101%;}a#lien2:hover {background-position: -191px 101%;}a#lien3:hover {background-position: -382px 101%;--></style></head><body><ul> <li><a id="lien1" href="#"></a></li> <li><a id="lien2" href="#"></a></li> <li><a id="lien3" href="#"></a></li> <li><a id="lien4" href="#"></a></li> <li><a id="lien5" href="#"></a></li> <li><a id="lien6" href="#"></a></li></ul></body></html> Merci de regarder ! Lien vers le commentaire Partager sur d’autres sites More sharing options...
libelinfo Posté 7 Avril 2009 Partager Posté 7 Avril 2009 (modifié) ha ok pigé donc... ça viens de la ligne 35 li a:hover { background:transparent url(abf.png) no-repeat scroll left top;} noté de cette façon, ce style là s'applique à tous les liens a:hover de tous les items li qui composent la liste donc il est logique que cela s'applique à tes liens 4, 5 et 6. donc... pour éviter le souci, une solution consisterait à taper ton style de cette manière : a#lien1:hover, a#lien2:hover, a#lien3:hover { background: transparent url(abf.png) top left no-repeat;} de cette façon, le "hover" ne va s'appliquer qu'aux liens qui nous intéressent : 1, 2, 3 ps : et une dernière petite chose, si on a pas besoin des 3 liens suivant, les 4, 5, 6 ont peut supprimer les lignes correspondantes dans le code html Modifié 7 Avril 2009 par libelinfo Lien vers le commentaire Partager sur d’autres sites More sharing options...
easytype Posté 7 Avril 2009 Auteur Partager Posté 7 Avril 2009 Hey, Merci beaucoup, sa marche super !!! Merci pour l'aide Arf, oui, pour les liens 4, 5 & 6 j'avais repris ça d'une autre "image" Encore merci et bonne soirée. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant