OnMouseOver et document.getElementById(id).style.display
Résolu
reedbedroom
Messages postés
80
Date d'inscription
Statut
Membre
Dernière intervention
-
reedbedroom -
reedbedroom -
Bonjour,
J'aimerais faire apparaitre un div au dessus d'un autre en passant ma souris sur ce dernier.
Voici mon code (en utilisant du javacript) :
Je ne comprends pas pourquoi mais cela ne fonctionne pas du tout... j'ai également trouver cette syntaxe mais qui n'a pas l'air de fonctionner non plus :
Et mon CSS :
Quelqu'un voit il une erreur dans ce code ? dois je placer une fonction javascript entre mes balises <head> pour faire fonctionner ce morceaux de code ?
Merci beaucoup.
J'aimerais faire apparaitre un div au dessus d'un autre en passant ma souris sur ce dernier.
Voici mon code (en utilisant du javacript) :
<a href="#" onMouseOver="document.getElementById(captionRecettes).style.display='block';">
<div id="recettes">
<div id="captionRecettes">
<div id="texte">
<span style="font-size:14px;">DÉCOUVREZ LES</span> NOUVELLES RECETTES
<br /><br /><br /><br />
<span style="font-size:12px;">imaginées par</span><br />PIERRE GAGNAIRE<br /><span style="font-size:12px;">avec la Crème Excellence</span>
</div>
</div>
</div>
</a>
Je ne comprends pas pourquoi mais cela ne fonctionne pas du tout... j'ai également trouver cette syntaxe mais qui n'a pas l'air de fonctionner non plus :
<a href="#" onMouseOver="document.captionRecettes.style.display='block';">
<div id="recettes">
<div id="captionRecettes">
<div id="texte">
<span style="font-size:14px;">DÉCOUVREZ LES</span> NOUVELLES RECETTES
<br /><br /><br /><br />
<span style="font-size:12px;">imaginées par</span><br />PIERRE GAGNAIRE<br /><span style="font-size:12px;">avec la Crème Excellence</span>
</div>
</div>
</div>
</a>
Et mon CSS :
#captionRecettes
{
float:left;
width:125px;
height:208px;
background-color:#FFF;
opacity:0.8;
display:none;
}
Quelqu'un voit il une erreur dans ce code ? dois je placer une fonction javascript entre mes balises <head> pour faire fonctionner ce morceaux de code ?
Merci beaucoup.
4 réponses
bonjour,
document.getElementById('captionRecettes').style.display='block';
cela devrait fonctionner normalement,
cordialement,
document.getElementById('captionRecettes').style.display='block';
cela devrait fonctionner normalement,
cordialement,
Oui super ça marche ... je pensais pourtant avoir essayé mais après une journée de boulot dur dur.
Est ce que par tout hasard tu saurais aussi comment ajouter un effet lors de l'apparition du div (transition de gauche à droite) ? Il me semble avoir déjà vu cela avec du code CSS un peu comme ça :
Dans tous les cas je classerai le sujet comme résolu !
Merci.
Est ce que par tout hasard tu saurais aussi comment ajouter un effet lors de l'apparition du div (transition de gauche à droite) ? Il me semble avoir déjà vu cela avec du code CSS un peu comme ça :
-webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;
Dans tous les cas je classerai le sujet comme résolu !
Merci.
tout se passe lors de ton appel sur le calque qui devra avoir 2 états : normal et lors du passage de la souris dessus (hover)
d'ailleurs si tu veux passer aux transitions il pourrait être intéressant d'oublier ton javascript lors du passage de la souris et de tout faire en CSS.
http://www.debray-jerome.fr/articles/css3-transition.html
tu pourras adapter en fonction de tes besoins et jouer sur les marges pour animer ton calque
d'ailleurs si tu veux passer aux transitions il pourrait être intéressant d'oublier ton javascript lors du passage de la souris et de tout faire en CSS.
http://www.debray-jerome.fr/articles/css3-transition.html
tu pourras adapter en fonction de tes besoins et jouer sur les marges pour animer ton calque
