11548 sujets

JavaScript, DOM et API Web HTML5

Faire apparaitre une DIV au survol d'un lien

Bonsoir,
j'ai un problème qui me semblait simple à résoudre mais ça semble plus corsé que prévu:

Je désire faire apparaitre une div contenant un texte informatif au survol d'un lien

.madiv{
position:absolute;
border: solid 1px blue;
width:100px;
height:100px;
right:200px;
top:200px;
visibility:hidden;}



<a onmouseover="class'madiv'.visibility=visible" onmouseout="class'madiv'.visibility=hidden"> blablabla</a>


Et ça ne fonctionne pas... Je pense que ma syntaxe n'est pas bonne, ou pire encore je n'ai rien compris à la sélection de "madiv" dois-je lui donner ine Id ou un name ??
Je souhaite une solution uniquement CSS SVP

Merci pour votre aide

Philippe
Bonsoir filtep,

Désolé, mais ton code ne vaut rien Smiley rolleyes .
Si tu fais appel à "onmouseover" et "onmouseout", tu dois appeler des fonctions en javascript et pas du CSS.
En clair, sur l'événement "onmouseover", tu dois appeler une fonction js que tu auras créée, par exemple "afficher_info()" . Cette fonction fera en sorte que le div devienne visible à l'écran. Rassure-toi, c'est ultra-simple à coder Smiley smile .
Si tu veux un coup de main, pas de problème. Mais essaie d'abord par toi-même Smiley cligne .

Tu dis que tu désires uniquement du CSS, c'est très faisable aussi avec le sélecteur :hover et la propriété "display".

Si tu entres "infobulle pur CSS" dans un moteur de recherches, tu trouveras certainement ton bonheur.
Modifié par lddsoft (02 Jul 2011 - 20:00)
merci pour ta réponse,
je veux du CSS en raison du fonctionnement aléatoire en JS si l'utilisateur a désactive JS...
Je vais explorer tes recommandations

A+
Philippe
filtep a écrit :
je veux du CSS en raison du fonctionnement aléatoire en JS si l'utilisateur a désactive JS...

OK, mais c'est une peur qui date. Aujourd'hui, la plupart des internautes ne désactivent pas javascript. Il y a quelque temps encore, on croyait que le javascript pouvait "infiltrer" l'ordinateur de l'utilisateur. A part la fonction "parcourir", je ne vois pas trop comment?
Tu trouveras sans problème en pur CSS Smiley cligne
Bon, après quelques essais toujours pas de résultat.
Je pense que ça devrait ressembler à quelque chose comme çà:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cabinet Médical WILSON</title>
 
<style type="text/css">

.madiv{ 
position:absolute; 
border: solid 1px blue; 
width:100px; 
height:100px; 
right:200px; 
top:200px; 
display:none;}

a:hover { madiv{display:block;}}

</style>

<html>

<div class="madiv"></div>
<a href="">blablabla</a>
</html>


Mais ma syntaxe doit être nulle Smiley ohwell
Non, tu n'y es pas encore, mais c'est pas grave Smiley smile .
Comme tu préfères éviter l'emploi de javascript, voici une piste en pur CSS pour nourrir ta réflexion :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Cabinet Médical WILSON</title> 
  
<style type="text/css"> 
.madiv{  
	display:none;
	position:absolute;  
	right:200px;  
	top:200px;  
	border: solid 1px blue;
	width:100px;  
	height:100px;
	background:#ffffcc;
	padding:10px;
} 
a:hover .madiv {display:block;} 
</style> 

</head>
<body>
	<p>
		Des mots <a href="#">blablabla<span class="madiv">Contenu de "madiv"</span></a> suite de la phrase...
	</p>
</body>
</html>
Je te signale quand même qu'il est possible de placer l'infobulle tout près du mot survolé Smiley cligne
Bon, c'est sur ça fonctionne parfaitement,
par contre ce qui m'échappe c'est pourquoi le "span" doit être à l'intérieur du lien ??

J'ai du boulot... mais je suis motivé Smiley ravi
filtep a écrit :
par contre ce qui m'échappe c'est pourquoi le "span" doit être à l'intérieur du lien ??
C'est une question de "descendance". En CSS, on parle de descendance lorsqu'un élément (l'enfant) est contenu dans un autre élément (le parent). Pour que la balise a puisse agir sur la balise span, il faut que cette dernière soit l'enfant de a. Si tu places la balise span ailleurs, il ne se passera rien au survol de a Smiley cligne .
Hello,
lddsoft a écrit :
Pour que la balise a puisse agir sur la balise span, il faut que cette dernière soit l'enfant de a. Si tu places la balise span ailleurs, il ne se passera rien au survol de a Smiley cligne .

Note de vocabulaire en passant: on ne dit pas «la balise span», mais «la balise <span>» ou «l'élément span». Smiley cligne

Sur le fond, c'est assez vrai mais il existe deux autres sélecteurs CSS qui peuvent nous intéresser ici, et nous permettre une structure HTML un peu différente.

Sélecteur de frère adjacent (+)
<p>
  Hop du texte avec <span class="term">un mot à définir</span>
  <span class="def">et une définition qui suit</span>
  et la suite du texte.
</p>

.term:hover + .def {
  color: red;
}


Sélecteur de frère générique (~)
<p>
  Hop du texte avec <span class="term">un mot à définir</span>
  et la suite du texte.
  <span class="def">La définition plus loin.</span>
</p>

.term:hover ~ .def {
  color: red;
}


Les deux ont leurs limites. Ils imposent une structure HTML relativement stricte. Et surtout, dans la plupart des cas ça amène à créer un contenu HTML non pertinent, pas lisible correctement dans un lecteur d'écran où si les styles CSS ne sont pas appliqués. Les solutions à base de JavaScript permettent de faire des choses un peu plus propres, et sont donc à privilégier la plupart du temps.

Si tu as un exemple concret de contenu, on pourra te dire quelle solution serait vraiment adaptée.
@fvsch > Merci pour les explications concernant les "sélecteurs de frère"; j'ignorais leur existence jusqu'à maintenant. Il est vrai que cela a l'air délicat à manipuler.

fvsch a écrit :
Note de vocabulaire en passant: on ne dit pas «la balise span», mais «la balise <span>» ou «l'élément span».
Cela, par contre, je le savais pour l'avoir lu dans un autre topic.

fvsch a écrit :
Les solutions à base de JavaScript permettent de faire des choses un peu plus propres, et sont donc à privilégier la plupart du temps.
Tout à fait d'accord avec toi, mais
filtep a écrit :
Je souhaite une solution uniquement CSS SVP
C'est pour cette raison que je ne l'ai pas aiguillé dans ce sens Smiley cligne .
Cordialement
Sujet clos
Aller à