[HTML/CSS] Probleme avec un hover
Résolu/Fermé
Unicorn777
Messages postés
30
Date d'inscription
jeudi 2 août 2007
Statut
Membre
Dernière intervention
9 septembre 2008
-
5 sept. 2007 à 22:52
Unicorn777 Messages postés 30 Date d'inscription jeudi 2 août 2007 Statut Membre Dernière intervention 9 septembre 2008 - 6 sept. 2007 à 23:02
Unicorn777 Messages postés 30 Date d'inscription jeudi 2 août 2007 Statut Membre Dernière intervention 9 septembre 2008 - 6 sept. 2007 à 23:02
A voir également:
- [HTML/CSS] Probleme avec un hover
- Editeur html - Télécharger - HTML
- Br html ✓ - Forum Webmastering
- &Nbsp html - Forum HTML
- Balise </br> - Forum HTML
- Espace html ✓ - Forum HTML
7 réponses
Unicorn777
Messages postés
30
Date d'inscription
jeudi 2 août 2007
Statut
Membre
Dernière intervention
9 septembre 2008
2
6 sept. 2007 à 00:42
6 sept. 2007 à 00:42
Au temps pour moi... j'avais voulu simplifier les noms que j'avais mis ici et j'ai oublié de changer a un endroit :)
le code html :
<div id="fond">
<div id="diapoAn2006">
</div>
<div id="diapoAn2007" onClick="javascript:alert('test mouseOver);"></div>
<div id="diapoEte2007"></div>
<div id="diapoEmpty"></div>
</div>
les css en rapports :
div#fond {
height:610px;
width:916px;
background-image:url(../images/fond.jpg);
background-repeat:no-repeat;
}
div#diapoEmpty {
background-image:url(../images/diapoEmpty.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:1;
}
div#diapoAn2006 {
background-image:url(../images/diapoAn2006unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:2;
}
a.diapoAn2006:hover {
background-image:url(../images/diapoAn2006.png);
}
div#diapoAn2007 {
background-image:url(../images/diapoAn2007unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:3;
}
a.diapoAn2007:hover {
background-image:url(../images/diapoAn2007.png);
}
div#diapoEte2007 {
background-image:url(../images/diapoEte2007unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:4;
}
a.diapoEte2007:hover {
background-image:url(../images/diapoEte2007.png);
}
C'est vraiment simpliste pourtant.. je vois pas ou ca merdouille
Sinon pour la technique avec le onMouseOverje prefererais eviter...
le code html :
<div id="fond">
<div id="diapoAn2006">
</div>
<div id="diapoAn2007" onClick="javascript:alert('test mouseOver);"></div>
<div id="diapoEte2007"></div>
<div id="diapoEmpty"></div>
</div>
les css en rapports :
div#fond {
height:610px;
width:916px;
background-image:url(../images/fond.jpg);
background-repeat:no-repeat;
}
div#diapoEmpty {
background-image:url(../images/diapoEmpty.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:1;
}
div#diapoAn2006 {
background-image:url(../images/diapoAn2006unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:2;
}
a.diapoAn2006:hover {
background-image:url(../images/diapoAn2006.png);
}
div#diapoAn2007 {
background-image:url(../images/diapoAn2007unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:3;
}
a.diapoAn2007:hover {
background-image:url(../images/diapoAn2007.png);
}
div#diapoEte2007 {
background-image:url(../images/diapoEte2007unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:4;
}
a.diapoEte2007:hover {
background-image:url(../images/diapoEte2007.png);
}
C'est vraiment simpliste pourtant.. je vois pas ou ca merdouille
Sinon pour la technique avec le onMouseOverje prefererais eviter...
ecumastor
Messages postés
1
Date d'inscription
samedi 30 avril 2005
Statut
Membre
Dernière intervention
5 septembre 2007
5 sept. 2007 à 23:14
5 sept. 2007 à 23:14
En HTML, j'utilise onMouseOut et onMouseOver.
Exemple ci-dessous :
<a href="index.php?rep=commerces" onMouseOut="swapImgRestore()" onMouseOver="swapImage('commerces','','images/boutons/commerces_over.gif',1)"><img src="images/boutons/commerces.gif" alt="commerces" name="commerces" border="0"></a>
avec deux images : commerces.gif et commerces_over.gif....
Exemple ci-dessous :
<a href="index.php?rep=commerces" onMouseOut="swapImgRestore()" onMouseOver="swapImage('commerces','','images/boutons/commerces_over.gif',1)"><img src="images/boutons/commerces.gif" alt="commerces" name="commerces" border="0"></a>
avec deux images : commerces.gif et commerces_over.gif....
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 778
6 sept. 2007 à 00:01
6 sept. 2007 à 00:01
Bonjour,
Pour que ça marche, il faut que tu t'adresses au même élément.
Or, on peut supposer que ce n'est pas le cas
Il faut que tu en montres plus.
Le code CSS complet de la manip.. Le code HTML aussi.
La page en ligne serait encore mieux.
++
Tu dois pouvoir t'inspirer de ces menus qui utilisent cette technique :
http://css.alsacreations.com/Galeries-de-menus-en-CSS
--
Pour que ça marche, il faut que tu t'adresses au même élément.
Or, on peut supposer que ce n'est pas le cas
div#diapo a.diapoEte2007:hoverPar exemple, “#diapo” et “.diapo” ne sont pas le même élément.
Il faut que tu en montres plus.
Le code CSS complet de la manip.. Le code HTML aussi.
La page en ligne serait encore mieux.
++
Tu dois pouvoir t'inspirer de ces menus qui utilisent cette technique :
http://css.alsacreations.com/Galeries-de-menus-en-CSS
--
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 778
6 sept. 2007 à 01:44
6 sept. 2007 à 01:44
““[dièse]diapo…” et “[point]diapo…” ne sont pas le même élément”
Corrige.
Le “:hover” se fait sur un <a> qui n'existe pas.
Et donc, la <div> devrait plutôt être un <a>.
Ou le <a> placé dans une <div> mais ayant l'id.
++
Ce bouton sert à rendre le code plus lisible.
Une méthode qui évite le temps de latence dû au chargement de la nouvelle image lors du survol :
http://www.peutetreunereponse.net/article-5551133-6.html
--
Corrige.
Le “:hover” se fait sur un <a> qui n'existe pas.
<div id="fond">
<div id="diapoAn2006"></div>
<div id="diapoAn2007" onClick="javascript:alert('test mouseOver);"></div>
<div id="diapoEte2007"></div>
<div id="diapoEmpty"></div>
</div>Pour que ça marche, l'image doit être dans un <a>.
Et donc, la <div> devrait plutôt être un <a>.
Ou le <a> placé dans une <div> mais ayant l'id.
<div id="diapoAn2006"></div>serait donc
<a id="diapoAn2006" href…></a>ou
<div><a id="diapoAn2006" href…></a></div>
++
Ce bouton sert à rendre le code plus lisible.
Une méthode qui évite le temps de latence dû au chargement de la nouvelle image lors du survol :
http://www.peutetreunereponse.net/article-5551133-6.html
--
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Unicorn777
Messages postés
30
Date d'inscription
jeudi 2 août 2007
Statut
Membre
Dernière intervention
9 septembre 2008
2
6 sept. 2007 à 20:29
6 sept. 2007 à 20:29
Ok, je n'avais pas bien compris l'uitlisation du :hover, ca semble reglé de ce coté mais ca m'entraine un autre petit soucis.
Actuellement ma ccs se presente comme ceci :
et mon code html tel que ceci :
Seulement il faut que ma photo qui est dans ma css soit clicable via ce lien... or si je met une balise img entre mon :hover ne fonctionne plus puisque l'image du code remplace toujours les images du css.
Merci d'avance pour ton aide Gihef, c'est vraiment cool de ta part !
Alex.
edit: J'ai parlé un peu vite... apparement le :hover tel que je l'ai fait ne fonctionne pas sur ie? normal?
Actuellement ma ccs se presente comme ceci :
div#fond {
height:610px;
width:916px;
background-image:url(../images/fond.jpg);
background-repeat:no-repeat;
}
div#diapoEmpty {
background-image:url(../images/diapoEmpty.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
z-index:1;
}
div#diapoAn2006 {
background-image:url(../images/diapoAn2006unhover.png);
background-repeat:no-repeat;
height:131px;
width:124px;
cursor:pointer;
border:none;
z-index:2;
}
div#diapoAn2006:hover {
background-image:url(../images/diapoAn2006.png);
}
et mon code html tel que ceci :
<div id="fond">
<div id="diapoAn2006">
<a href="gallery/horloge_juju.jpg"></a>
</div>
</div>
Seulement il faut que ma photo qui est dans ma css soit clicable via ce lien... or si je met une balise img entre mon :hover ne fonctionne plus puisque l'image du code remplace toujours les images du css.
Merci d'avance pour ton aide Gihef, c'est vraiment cool de ta part !
Alex.
edit: J'ai parlé un peu vite... apparement le :hover tel que je l'ai fait ne fonctionne pas sur ie? normal?
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 778
6 sept. 2007 à 21:40
6 sept. 2007 à 21:40
Bien que ça soit prévu pour fonctionner autre part, IE n'aime le :hover que sur les <a>.
Oui, c'est cool. Ça essaye.
Mais ça ne va pas le rester longtemps si tu ne lis pas ce que je t'explique (-;
Vois html css probleme avec un hover#4
“il faut que ma photo qui est dans ma css soit clicable”
Pas de problème. Le <a> sert à ça.
L'image est affichée. On pointe, une nouvelle la remplace et le lien s'active.
On clique et la nouvelle page se charge.
++
Pour que le <a> affiche l'image en entier, qu'il respecte les dimensions que tu lui donneras, il faut que tu lui ajoute un
Oui, c'est cool. Ça essaye.
Mais ça ne va pas le rester longtemps si tu ne lis pas ce que je t'explique (-;
Vois html css probleme avec un hover#4
“il faut que ma photo qui est dans ma css soit clicable”
Pas de problème. Le <a> sert à ça.
L'image est affichée. On pointe, une nouvelle la remplace et le lien s'active.
On clique et la nouvelle page se charge.
++
Pour que le <a> affiche l'image en entier, qu'il respecte les dimensions que tu lui donneras, il faut que tu lui ajoute un
display : block;--
Unicorn777
Messages postés
30
Date d'inscription
jeudi 2 août 2007
Statut
Membre
Dernière intervention
9 septembre 2008
2
6 sept. 2007 à 23:02
6 sept. 2007 à 23:02
Effectivement ca marche très bien en mettant le :hover sur la balise <a>!
Je sais pas pourquoi je me suis enteté à vouloir continuer avec les divs.
Un grand merci à toi, et promis la prochaine fois je suis à la lettre les conseils ! :D
Je sais pas pourquoi je me suis enteté à vouloir continuer avec les divs.
Un grand merci à toi, et promis la prochaine fois je suis à la lettre les conseils ! :D
