18073 sujets

Questions générales et questions de débutants

[Résolu] Afficher / Masquer des calques sans java script

Bonjour,

j'ai installé le système d'"info bulle" sur une page test pour mon site dont voici le lien : www.spcs.ch/infobulle.html

Mais l'infobulle s'affiche toujours au même emplacement sur la page et non, comme je le voudrait, en dessous du texte...

Voici le code de ma page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: block;
position: absolute;
top:2em; left:2em; width:15em;/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:3px solid #000000;
left: 100px;
width: 200px;
height: 100px;
background: #FFDC93;
text-align: center;
color: #993333;
font: 12px Verdana, sans-serif;

}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>

<body>
<p>&nbsp;</p>
<p><a href="">afficher le calque<span>texte et images peuvent être placés ici</span></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
  <a href="">lien<span>blablablalballbla  héhéhé</span></a>
</p>
</body>
</html>


Est-ce que quelqu'un purrait me dire la modification à apporté à mon code pour avoir l'info bulle en dessous du texte?

De plus, j'aimerai mettre le text à l'interieur de l'infobulle en gras. C'est certainement très simple, mais je n'y arrive pas...

Par avance merci.
Modifié par tbdakspirit (08 Mar 2006 - 18:13)
Salut Alan et merci pour ta réponse!

Ta solution marche très bien.

Toutefois, j'ai encore un petit problème. Si le lien est en bord de la page à droite, l'infobulle s'afiche en partie à l'extérieur de l'écran... Y a-t-il une solution pour éviter ce problème?

Merci!
Bonsoir,
Si tu sais quels liens seront à droite, tu peux créer une classe spéciale en l'attribuant au span de ces liens de sorte que l'info bulle apparaisse à leur gauche.

Pour que ce soit bon à tous les coups, tu peux faire en sorte que l'info-bulle apparaisse au même niveau vertical que le lien, mais qu'elle soit centrer horizontalement par rapport à la page ou à un conteneur.
Modifié par Alan (03 Mar 2006 - 20:32)
Alan a écrit :
Bonsoir,
Si tu sais quels liens seront à droite, tu peux créer une classe spéciale en l'attribuant au span de ces liens de sorte que l'info bulle apparaisse à leur gauche.

Pour que ce soit bon à tous les coups, tu peux faire en sorte que l'info-bulle apparaisse au même niveau vertical que le lien, mais qu'elle soit centrer horizontalement par rapport à la page ou à un conteneur.


Salut,

C'est une bonne idée, mais on fait comment ça? Smiley sweatdrop

Et j'ai une autre question (hé oui encore une!) est-il possible de forcer un retour à la ligne du texte à l'interieur de l'infobulle?

Merci

@++
Salut tbdakspirit,

Pour que l'info-bulle soit horizontalement centrée, mais verticalement au niveau du <a> correspondant : il faut un left: 50%; et une marge négative de la moitié de la largeur de l'info-bulle, soit ici 100px. Ne pas mettre de top (utiliser si besoin les marges), et enlever la position relative sur a:hover.
a:hover span {
	left: 50%;
	margin-left: -100px;
}

Pour que l'infobulle appaissent à gauche : left: -200px en laissant la position relative sur a:hover :

Forcer le retour à la ligne, tu veux dire avec <br /> ? Oui c'est possible.

Bonne continuation Smiley smile
Modifié par Alan (07 Mar 2006 - 07:43)
Oups j'ai parlé trop vite... Smiley confused

j'ai créé un "span1" avec le left:-100 pour que l'infobulle aparaisse à gauche sur certain lien... Ca marche très bien sous FF mais malheureusement pas sous IE (l'infobulle ne s'afiche pas, le texte de l'infobulle s'affiche à l'écran)

voici la page : www.spcs.ch/Calendrier/mars.php

et voici mon code css que j'introduit grace à un include dans ma page :




<style type="text/css">
<!--
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
position: relative;
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: block;
position: absolute;
top:2em; left:2em; width:5em;/* positions et dimensions du calque, que vous pouvez changer à loisir */
border:3px solid #000000;
left: 10px;
width: 195px;
background: #FFDC93;
text-align: left;
color: #993333;
font: 12px Verdana, sans-serif;
font-weight:bold; 
}
a span1 { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span1 { /* définition de la balise <span> au survol */
display: block;
position: absolute;
left: -100px;
margin-left: -130px;
border:3px solid #000000;
left: 10px;
width: 195px;
background: #FFDC93;
text-align: left;
color: #993333;
font: 12px Verdana, sans-serif;
font-weight:bold; 

}
-->
</style>


Voilà. Si une bonne âme pouvait encore me venir en aide...

Merci
Salut,
Il ne faut pas créer comme tu l'as fait "span1", mais attribuer une classe à span. Comme par exemple en html : 
<span class="infobulleGauche">...</span>

et en css 
a:hover span.infobulleGauche {
left: -100px;
...
}

Tu ne dois pas non plus tout doubler comme tu l'as fait dans la CSS. D'après mon exemple, il suffit juste d'ajouter a:hover span.infobulleGauche avec seulement les propriétés qui doivent changer de valeur. Pour tout ce qui reste commun, ça ne sert à rien.

Bonne continuation
Sujet clos
Aller à