[JS] Simuler un hover sur <span>

Résolu/Fermé
josh - 5 avril 2006 à 10:53
 optyler - 4 nov. 2006 à 17:01
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

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)
5
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
30 mai 2006 à 20:25
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
1
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 ... ^_^)
1
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 776
5 avril 2006 à 16:48
Bonjour,

Rien ne t'empêche de te contenter des CSS pour l'effet.

Conserve une <a> qui pointera vers # :
<a href="#">ton_texte</a>
0
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
0
Résolu :

Avec un <a> dans le label (href=#), au clic -> coche le radio correspondant (document.getElementById(radio$i).checked=true) puis -> document.form.submit()

voilà, si ca peut aider...

Merci @+
0
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606 > josh
8 avril 2006 à 16:16
Bjr Josh

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
0

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.
0
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
4 nov. 2006 à 14:39
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.

@+
0