OnMouseOver et document.getElementById(id).style.display

Résolu/Fermé

reedbedroom Messages postés 80 Date d'inscription lundi 11 juillet 2011 Statut Membre Dernière intervention 1 janvier 2020 - 4 avril 2013 à 18:36
reedbedroom - 5 avril 2013 à 10:02

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

<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

Réponse 1 / 4

jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 39
4 avril 2013 à 19:21

bonjour,

document.getElementById('captionRecettes').style.display='block';

cela devrait fonctionner normalement,

cordialement,

Réponse 2 / 4

reedbedroom Messages postés 80 Date d'inscription lundi 11 juillet 2011 Statut Membre Dernière intervention 1 janvier 2020 97
4 avril 2013 à 20:19

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 :

-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.

Réponse 3 / 4

jambondardennes Messages postés 481 Date d'inscription jeudi 12 juin 2008 Statut Membre Dernière intervention 6 septembre 2017 39
4 avril 2013 à 22:13

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

Réponse 4 / 4

reedbedroom
5 avril 2013 à 10:02

Oui merci c'est tout à fait ce que je voulais... tout faire en CSS.

Je regarde tout ça ... merci pour les infos.

Discussions similaires

document.getElementById('mess').style.display = 'block' ?

probleme document.getElementById

c'est quoi document.getElementById

document.write // document.getElementById()

Discussions similaires

Newsletters