Bonjour à tous,
J'ai mis en place, pour un formulaire, une petite fonction d'aide contextuelle qui apparaît au survol (ou au focus) d'un champ.
Je n'ai pas utilisé de javascript mais que les CSS avec le selecteur d'enfant >, le selecteur + et les pseudo-classes :hover et :focus.
Tout ça marche sur Firefox. Pour IE, j'ai prévu une solution dégradée : le texte d'aide n'apparaît pas, il est toujours visible.
Mais je n'arrive pas à le faire marcher sur Opera.
Mon problème est double :
- j'aimerais avoir sur Opera le même résultat que sur Firefox
- 90 % de mes utilisateurs sont sur IE. J'envisage donc de développer cette fonction d'aide en javascript mais je voudrais que, si le javascript est desactivé, le code CSS prenne le relais.
Je sollicite votre aide et vos conseils.
Voici mon code :
Et les CSS :
J'ai mis en place, pour un formulaire, une petite fonction d'aide contextuelle qui apparaît au survol (ou au focus) d'un champ.
Je n'ai pas utilisé de javascript mais que les CSS avec le selecteur d'enfant >, le selecteur + et les pseudo-classes :hover et :focus.
Tout ça marche sur Firefox. Pour IE, j'ai prévu une solution dégradée : le texte d'aide n'apparaît pas, il est toujours visible.
Mais je n'arrive pas à le faire marcher sur Opera.
Mon problème est double :
- j'aimerais avoir sur Opera le même résultat que sur Firefox
- 90 % de mes utilisateurs sont sur IE. J'envisage donc de développer cette fonction d'aide en javascript mais je voudrais que, si le javascript est desactivé, le code CSS prenne le relais.
Je sollicite votre aide et vos conseils.
Voici mon code :
<label class="chpObligatoire" title="Renseignement obligatoire" for="entrepriseNom">Nom<span class="asterisque">*</span> :</label>
<input class="imgAide" type="text" name="entrepriseNom" id="entrepriseNom" value="" />
<div id="aideEntrepriseNom" class="aideSaisie">
<span class="titre">Nom :</span> Indication supplémentaire. Précisions pour la saisie.
</div>
Et les CSS :
/* -------------------------- Aide à la saisie */
/* le selecteur html>body n'est pas compris par les navigateurs non-standards
/* les pseudo class :hover et :focus ne sont pas comprises par les navigateurs non-standards
/* --- FireFox (1.0.7 - 1.5) : Ok pour : html>body -- :focus -- :hover
/* --- Opera (8.5) : Ok pour : html>body -- :focus
/* --- IE (5.5 - 6.0) : Aucun
*/
/* regle pour IE :
/* --- Comportement degrade du texte d'aide */
.aideSaisie {
position:relative;
_margin:0 0 0 23em;
font-size:0.8em;
color:#516F0D;
z-index:100
}
/* regle non-lue par IE : */
/* --- Comportement souhaite du texte d'aide */
html>body .aideSaisie {
display:none;
z-index:100;
position:absolute; left:350px;
width:15em;
padding:0.5em 0.7em 0.5em 20px;
border:1px solid #D5C429;
font-size:1em; color:#000
}
.aideSaisie .titre {
font-weight:bold
}
/* Apparition des textes d'aide au survol et sur le focus */
#entrepriseNom:focus + #aideEntrepriseNom, #entrepriseNom:hover + #aideEntrepriseNom {
display:block;
z-index:100
}
/* --- Un texte d'aide peut apparaitre au survol d'un champ alors que le focus est toujours dans un autre champ : */
/* --- Les deux textes cohabitent ; celui du hover passe au dessus de celui du focus */
#entrepriseNom:hover + #aideEntrepriseNom {
z-index:500
}
/* --- Ainsi de suite pour chacun des champs necessitant un texte d'aide */
#entrepriseSiren:focus + #aideEntrepriseSiren, #entrepriseSiren:hover + #aideEntrepriseSiren {
display:block;
z-index:100
}
#entrepriseSiren:hover + #aideEntrepriseSiren {
z-index:500
}
#entrepriseAffiliee:focus + #aideEntrepriseAffiliee, #entrepriseAffiliee:hover + #aideEntrepriseAffiliee {
display:block;
z-index:100
}
#entrepriseAffiliee:hover + #aideEntrepriseAffiliee {
z-index:500
}
#entrepriseDate:focus + #aideEntrepriseDate, #entrepriseDate:hover + #aideEntrepriseDate {
display:block;
z-index:100
}
#entrepriseDate:hover + #aideEntrepriseDate {
z-index:500
}
/* -------------------------- /Aide à la saisie */