[JS] Simuler un hover sur <span>
Résolu
josh
-
optyler -
optyler -
Salut
J'aimerai simuler un effet 'lien' sur une balise <span> ou <label>. je m'explique : l'attribut CSS hover ne marche que sur la balise <a>, or je souhaite faire en sorte que le survol de ma balise <label> ou <span> (span à l'intérieur de label) souligne le texte.
Car mon code contient un radiobutton avec son label associé, et un onclick l'envoi du formulaire. Grace au label, je peux cliquer aussi bien sur le radio que sur le texte pour envoyer le formulaire. J'ai déjà ajouter un style 'cursor' pour afficher une petite main au survol du label, mais j'aimerai bien poffiner tout ca avec un soulignement.
J'ai essayé avec un onmouseover() qui change le text-decoration du label (ou du span) mais j'ai l'erreur "setting a property that has only a getter" (et google n'apporte pas bcp de solutions pour celle ci).
Quelqu'un de calé en JS peut il m'eclairer?
merci d'avance, bonne journée
Josh
J'aimerai simuler un effet 'lien' sur une balise <span> ou <label>. je m'explique : l'attribut CSS hover ne marche que sur la balise <a>, or je souhaite faire en sorte que le survol de ma balise <label> ou <span> (span à l'intérieur de label) souligne le texte.
Car mon code contient un radiobutton avec son label associé, et un onclick l'envoi du formulaire. Grace au label, je peux cliquer aussi bien sur le radio que sur le texte pour envoyer le formulaire. J'ai déjà ajouter un style 'cursor' pour afficher une petite main au survol du label, mais j'aimerai bien poffiner tout ca avec un soulignement.
J'ai essayé avec un onmouseover() qui change le text-decoration du label (ou du span) mais j'ai l'erreur "setting a property that has only a getter" (et google n'apporte pas bcp de solutions pour celle ci).
Quelqu'un de calé en JS peut il m'eclairer?
merci d'avance, bonne journée
Josh
A voir également:
- Span:hover
- Arrondi js - Forum Javascript
- Arrondir js - Forum Webmastering
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Photoshop
- Reproduction d'un dessin - Forum Graphisme
- Pb d'arrondi en javascript ✓ - Forum Windows
5 réponses
Juste des précisions ... le fait de valider un formulaire par une balise autres qu'un <submit> est dégueu et va totalement a l'encontre des normes du W3C ! encore pire, le fait de valider le formulaire via javascript est vraiment crade ! il suffit qu'une de tes instructions ne passe pas sur un des navigateurs et le visiteur de ton site ne pourra plus valider le formulaire idem si le visiteur à désactivé javascript.
voila, c'est tout ce que j'avais à dire :o)
voila, c'est tout ce que j'avais à dire :o)
Bsr
Le fait qu'aucun navigateur ne respecte l'intégralité des normes du W3C va totalement à l'encontre des normes du W3C !
Mais faut arrêter de considérer le W3C comme la référence absolue, le Saint Graal du net !
Certain ca établie un cadre et des règles mais même le W3C est loin d'être parfait !
Par exemple le fait que les marges verticales de 2 éléments adjaccents fusionnent sans qu'on puisse l'empêcher ...
Donc parfois W3C : le 3 qui était de trop ! LOL
Le fait qu'aucun navigateur ne respecte l'intégralité des normes du W3C va totalement à l'encontre des normes du W3C !
Mais faut arrêter de considérer le W3C comme la référence absolue, le Saint Graal du net !
Certain ca établie un cadre et des règles mais même le W3C est loin d'être parfait !
Par exemple le fait que les marges verticales de 2 éléments adjaccents fusionnent sans qu'on puisse l'empêcher ...
Donc parfois W3C : le 3 qui était de trop ! LOL
Deux tres bon documents :)
merci pour le partage.
(On remaquera qu'il n'y a que deux évenement qui sont compatibles tous navigateurs; et apres les clients s'étonnent que les developpement web/ajax prennent du temps ... ^_^)
merci pour le partage.
(On remaquera qu'il n'y a que deux évenement qui sont compatibles tous navigateurs; et apres les clients s'étonnent que les developpement web/ajax prennent du temps ... ^_^)
Bonjour,
Rien ne t'empêche de te contenter des CSS pour l'effet.
Conserve une <a> qui pointera vers # :
Rien ne t'empêche de te contenter des CSS pour l'effet.
Conserve une <a> qui pointera vers # :
<a href="#">ton_texte</a>
Si, justement, ca m'empeche!
Avec un <a>, au clic, mon radiobutton n'est plus checké, et donc mon formulaire n'est plus envoyé! Car l'utilisation d'un label sert justement à selectionner un radio en cliquant sur son nom. Donc là, c'est le # qui est prioritaire et alors cela ne fait rien (à part souligner le texte ;) )
Voilà pourquoi je cherche toujours un moyen par javascript
Merci quand même à toi, mais si tu as d'autres pistes...
Josh
Avec un <a>, au clic, mon radiobutton n'est plus checké, et donc mon formulaire n'est plus envoyé! Car l'utilisation d'un label sert justement à selectionner un radio en cliquant sur son nom. Donc là, c'est le # qui est prioritaire et alors cela ne fait rien (à part souligner le texte ;) )
Voilà pourquoi je cherche toujours un moyen par javascript
Merci quand même à toi, mais si tu as d'autres pistes...
Josh
Bjr Josh
Avec un peu de JavaScript plus un style intégré tu peux faire ceci :
Nota : les différents styles doivent être préfixé par l'identifiant de chaque balise span ex span1_out, span1_over, toto_out, toto_over etc ...
A toi d'adapter
Avec un peu de JavaScript plus un style intégré tu peux faire ceci :
<html>
<head>
<style>
<!--
.span1_over
{
color : #FF0000;
}
.span2_over
{
color : #0000FF;
}
.span1_out,.span2_out
{
color : #000000;
}
// -->
</style>
<script type="text/javascript">
<!--
function mouseOver(event)
{
// Affecte le nouveau syle : ex span1_over
this.className = this.id+'_over';
// Empêche la propagation de l'événement
if (this == document) return true;
if (window.event) window.event.cancelBubble = true;
if (event)
{
event.preventDefault();
event.stopPropagation();
}
return true;
}
function mouseOut(event)
{
// Affecte le nouveau syle : ex span1_out
this.className = this.id+'_out';
if (this == document) return true;
if (window.event) window.event.cancelBubble = true;
if (event)
{
event.preventDefault();
event.stopPropagation();
}
return true;
}
function registerEvents(eltId)
{
elt = document.getElementById(eltId);
elt.onmouseover = mouseOver;
elt.onmouseout = mouseOut;
elt.className = elt.id+'_out'; // Style par défaut ex span1_out
}
function load()
{
// Affecte les événements sur les différents span
registerEvents("span1");
registerEvents("span2");
}
//-->
</script>
</head>
<body onload="load()">
<p>Ceci est un test pour <span id="span1">hover</span> sur <span id="span2">span</span></p>
</body>
</html>
Nota : les différents styles doivent être préfixé par l'identifiant de chaque balise span ex span1_out, span1_over, toto_out, toto_over etc ...
A toi d'adapter
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Le probleme des marges qui se "mangent" n'est certainement pas dû au W3C mais au navigateur qui interprete à sa sauce le code HTML et la mise en page des éléments.
D'autre part, si personne ne suit aucun standard ca va etre difficile de si retrouver entre tout les langages divers / les compilateurs / les regles plus ou moins débiles / les outils de dev / les apis ... et plus y'a de techno et moins y'a de documentation ...
Enfin bref, nous entrons dans un conflit de valeur ce qui signifie que celui-ci ne se finira jamais, je dirai donc que tu as raison, je m'excuse de t'avoir offensé, je m'excuse d'être née ... promis je recommencerai plus ... le "début de conflit" résolu je vous souhaite une Bonne soirée.
D'autre part, si personne ne suit aucun standard ca va etre difficile de si retrouver entre tout les langages divers / les compilateurs / les regles plus ou moins débiles / les outils de dev / les apis ... et plus y'a de techno et moins y'a de documentation ...
Enfin bref, nous entrons dans un conflit de valeur ce qui signifie que celui-ci ne se finira jamais, je dirai donc que tu as raison, je m'excuse de t'avoir offensé, je m'excuse d'être née ... promis je recommencerai plus ... le "début de conflit" résolu je vous souhaite une Bonne soirée.
Bjr optyler,
Tu n'as pas à t'excuser je ne faisais que donner mon avis et notamment sur les marges après m'être pris la tête avec.
Je n'ai pas toujours raison, je me plante même carrement parfois en répondant sur ce site, hé oui !
Cependant à propos des marges un article font intéressant d'ailleurs :
http://www.w3.org/TR/CSS2/box.html
Autre truc pas génial non plus avec W3C, le bouton de la souris retourné par un Mouse Event :
http://www.quirksmode.org/dom/w3c_events.html
Donc évidemment que la norme est utile si on garde le meilleur et qu'on laisse de côté le reste.
Quant au JavaScript, je te l'accorde avec Micro$oft arrrgggg !! mais c'est qd même bien pratique faut faire gaffe aux memory leaks avec DOM et ca roule.
@+
Tu n'as pas à t'excuser je ne faisais que donner mon avis et notamment sur les marges après m'être pris la tête avec.
Je n'ai pas toujours raison, je me plante même carrement parfois en répondant sur ce site, hé oui !
Cependant à propos des marges un article font intéressant d'ailleurs :
http://www.w3.org/TR/CSS2/box.html
Autre truc pas génial non plus avec W3C, le bouton de la souris retourné par un Mouse Event :
http://www.quirksmode.org/dom/w3c_events.html
Donc évidemment que la norme est utile si on garde le meilleur et qu'on laisse de côté le reste.
Quant au JavaScript, je te l'accorde avec Micro$oft arrrgggg !! mais c'est qd même bien pratique faut faire gaffe aux memory leaks avec DOM et ca roule.
@+
