Bonjour a tous,
Partant d'un script (HTML, CSS) d'affichage d'une infobulle textuelle sur un "survol" d'un bouton radio, je voudrais maintenant l'affichage de l'infobulle textuelle sur un "clic" bouton radio (au lieu du survol).
N'etant pas expert en javascript, je souhaiterai quelques conseils et une aide pour afficher cette infobulle textuelle sur clic bouton radio. D'avance merci pour toute contribution.
A la suite les fichiers (HTML, CSS) utilises actuellement.
Fichier HTML
--------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tests (qcm) balisage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../../infobulle.css" rel="stylesheet" type="text/css">
</head>
<body>
<p><a href="#" class="info"><span>--- Texte Infobulle 1 ---</span><input name="radiobutton"
type="radio" value="radiobutton"></a></p>
<p><a href="#" class="info"><span>--- Texte Infobulle 2 ---</span><input name="radiobutton"
type="radio" value="radiobutton"></a></p>
</body>
</html>
Fichier CSS
-----------
@charset "utf-8";
/* CSS Document */
/* Definition de la taille et de la police
{
font-size: 11px; /* on définit les propriétés de texte pour toutes les balises
font-family: Tahoma, Verdana, Arial, serif;
}
*/
a.info {
color: black;
text-decoration: none;
position: relative;
}
a.info:hover {
border : 0; /* ligne qui corrige le bug d'IE6 et inférieur */
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info span
{
position: absolute;
top: auto; /* on positionne notre infobulle */
left: 60px;
height: auto;
/* width:: 250px;*/
overflow: visible;
display: none; /* on masque l'infobulle */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de
retour à la ligne non-désiré */
background: #FFFFCC;
color: black;
padding: 3px;
}
-----------------------
Partant d'un script (HTML, CSS) d'affichage d'une infobulle textuelle sur un "survol" d'un bouton radio, je voudrais maintenant l'affichage de l'infobulle textuelle sur un "clic" bouton radio (au lieu du survol).
N'etant pas expert en javascript, je souhaiterai quelques conseils et une aide pour afficher cette infobulle textuelle sur clic bouton radio. D'avance merci pour toute contribution.
A la suite les fichiers (HTML, CSS) utilises actuellement.
Fichier HTML
--------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tests (qcm) balisage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../../infobulle.css" rel="stylesheet" type="text/css">
</head>
<body>
<p><a href="#" class="info"><span>--- Texte Infobulle 1 ---</span><input name="radiobutton"
type="radio" value="radiobutton"></a></p>
<p><a href="#" class="info"><span>--- Texte Infobulle 2 ---</span><input name="radiobutton"
type="radio" value="radiobutton"></a></p>
</body>
</html>
Fichier CSS
-----------
@charset "utf-8";
/* CSS Document */
/* Definition de la taille et de la police
{
font-size: 11px; /* on définit les propriétés de texte pour toutes les balises
font-family: Tahoma, Verdana, Arial, serif;
}
*/
a.info {
color: black;
text-decoration: none;
position: relative;
}
a.info:hover {
border : 0; /* ligne qui corrige le bug d'IE6 et inférieur */
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info span
{
position: absolute;
top: auto; /* on positionne notre infobulle */
left: 60px;
height: auto;
/* width:: 250px;*/
overflow: visible;
display: none; /* on masque l'infobulle */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de
retour à la ligne non-désiré */
background: #FFFFCC;
color: black;
padding: 3px;
}
-----------------------