11548 sujets

JavaScript, DOM et API Web HTML5

Tableau et rollover

Bonjour

Je cherche a faire un rollover sur un tableau et la seul methode que j'ai trouvé est de rajouter des scripts javascript dans le code html

<tr onMouseOut=javascript:this.style.background="#FFFFFF" onMouseOver=javascript:this.style.background="#FFFFCC"></tr>


Ca marche nikel mais je voudrais savoir s'il est possible de mettre ces deux scripts dans la definition du tag qui se trouve dans mon css ?

Merci
gael
J'ai déplacé ton sujet ici puisqu'on le sujet est le javascript.

C'est tout à fait possible mais je verrais mieux une utilisation de la pseudo class hover sur, par exemple, tes ligne de tableau (tr) couplé à une adaptation du script SuckerFish Hover afin de simuler cette propriété sur IE5/6.
Ainsi ton rollover fonctionnera sur tous les navigateurs supportant hover sur des éléments autres que la balise "a" (en gros la pluspart des navigateurs modernes) ET il fonctionnera sous IE si javascript est activé.

Pour préciser, si tu ajoute cette propriété CSS :


tr {
 background:#FFFFFF;
}

tr:hover {
 background:#FFFFCC;
}


Ton rollover fonctionne sur tous les navigateurs récents, mais pas (encore) sous IE 5/6, il ne reste plus qu'a ajouter une version un peu modifié du script suckerFishHover pour émuler le comportement sous ce navigateur et le tour est joué.

C'est ce que je ferais en tout cas, je ne sais pas ce que tu en pense.
Modifié par jb_gfx (22 Mar 2005 - 15:49)
A ce niveau la je ne pensais pas grand chose Smiley biggrin

Ca marche exactement comme tu l'as dis ... c'est a dire que ca marche sous Firefox mais pas sous IE (foutu standard !!), enfin pas tout a fait : mon rollOver met le texte en gras mais ne le remet pas à son style initiale une fois que je quite le focus.

Si tu as encore une superbe explication comme celle d'avant je suis preneur !!

Merci
gael
gAgA a écrit :
A ce niveau la je ne pensais pas grand chose Smiley biggrin

Ca marche exactement comme tu l'as dis ... c'est a dire que ca marche sous Firefox mais pas sous IE (foutu standard !!), enfin pas tout a fait : mon rollOver met le texte en gras mais ne le remet pas à son style initiale une fois que je quite le focus.

Si tu as encore une superbe explication comme celle d'avant je suis preneur !!

Merci
gael

Mauvaise implémentation des évèments d'émulation MSIE?
As tu un exemple de ton implémentation du suckerfish?
Voila mon script javascript :


<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementsByTagName("tr");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>


et mon css :


tr:hover, tr.sfhover {
	color: Black;
	font-weight: bold;
}
tr{
	font-weight: normal;
}


voila ...[/i][/i]
Non je ne connaissais pas mais cela ne regle pas mon probleme.

Je pense que je ne suis pas loin car sous IE quand je passe ma souris sur les lignes de mon tableau le fond change de couleur mais une fois que je quitte le focus de la ligne elle ne reprend pas sa couleur initiale. (Par contre ca marche impecable sour Firefox).

Je fais peut etre un peu mon boulet (désolé) avec ce post mais j'aimerais bien reussir a faire ce foutu hover sur mes <TR>.

Merci
gael
Pourtant si, cette version permet de faire des rollovers sur n'importe quelle éléments ou balise. Et même plus que des rollover puisqu'elle implemente hover, focus, target et active. Avec un seul script...

Pour ton code cela fonctionne si tu remplace les lignes :

EDIT: Oublie, c'est un bug avec l'affichage du forum. Ton script est bon, il fonctionne chez moi sous IE 6 et IE 5...
Modifié par jb_gfx (07 Apr 2005 - 12:50)
Sujet clos
Aller à