Apparition d'un bloc au survol d'un lien [Résolu]

filtep · 20/11/2011, 17h18

Bonjour,
la question a du être posée à plusieurs reprises mais je cherche une solution simple pour faire apparaitre un bloc au passage de la souris sur un lien... Je cherche depuis ce matin, sans succès.Ça ne doit pas être bien sorcier pourtant.
Voici mon code, qui ne fonctionne pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<html>
<head>
<title>Test apparition DIV</title>
 <style type="text/css">
 
 .madiv{
 width:50px;
 height:50px;
 border:solid 1px red;
 visibility:hidden;
 }
 </style>
 
</head>
<body>
<a href="#" onmouseover="madiv.visibility='visible';" onmouseout="madiv.visibility='hidden';">Survolez pour voir la DIV</a>
<div class="madiv"></div>
</body>
</html>

Merci à ceux qui le pourront de m'éclairer

A+
Philippe

rotrevrep · 20/11/2011, 20h57

ton code pose plusieurs problèmes :
l'édition du style en javascript ne peut se faire normalement avec les classes.
Comme tu n'as qu'une div, utilise plutot un identifiant en css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#madiv{
 width:50px;
 height:50px;
 border:solid 1px red;
 visibility:hidden;
 }

de plus, pour éditer un style en javascript, il faut utiliser la syntaxe suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
id.style.width //exemple pour éditer la largeur
//ou mieux encore
document.getElementById('id').style.width

voilà !

rotrevrep · 20/11/2011, 20h59

c'est mon jour de bonté : voici le code corrigé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>Test apparition DIV</title>
 <style type="text/css">
 
 #madiv{
 width:50px;
 height:50px;
 border:solid 1px red;
 visibility:hidden;
 }
 </style>
 
</head>
<body>
<a href="#" onmouseover="document.getElementById('madiv').style.visibility='visible';" onmouseout="document.getElementById('madiv').style.visibility='hidden';">Survolez pour voir la DIV</a>
<div id="madiv">dgsd</div>
</body>
</html>

certains apprécieraient que tu place le style dans un fichier css séparé, mais ici ce n'est pas trop grave, tu n'as pas grand chose

filtep · 20/11/2011, 21h31

Merci beaucoup,

ça me parait tout bête maintenant que je vois ta correction, mais j'y étais depuis ce midi...
Je vais tenir compte de tes remarques de présentation dans mes prochains posts...

A+
Philippe

rotrevrep · 20/11/2011, 21h42

de rien

.
marque donc ce post comme résolu et donne moi des points !

20/11/2011, 21h31	#4
filtep Futur Membre du Club Inscription : juin 2007 Messages : 68 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations forums : Inscription : juin 2007 Messages : 68 Points : 18 Points : 18	Merci beaucoup, ça me parait tout bête maintenant que je vois ta correction, mais j'y étais depuis ce midi... Je vais tenir compte de tes remarques de présentation dans mes prochains posts... A+ Philippe
	00

20/11/2011, 21h42	#5
rotrevrep Membre Expert yannick inizan Secrétaire d'état à la procrastination Inscription : février 2011 Messages : 304 Détails du profil Informations personnelles : Nom : yannick inizan Âge : 25 Localisation : France, Cher (Centre) Informations professionnelles : Activité : Secrétaire d'état à la procrastination Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 304 Points : 1 118 Points : 1 118	de rien . marque donc ce post comme résolu et donne moi des points !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email