Faire un effet de highlight sur une table
Submitted by PiTiLeZarD on Tue, 09/13/2005 - 14:06
Tagged:
Sans pourrir son code HTML naturellement ... Enfin le but c'est quand même de pouvoir construire la table html normalement et que l'effet se face comme par magie ;)
Le bout de code qui suit se contente de prendre tous les éléments TR et de leur appliquer cet effet de highlight ...
<script type="text/javascript"> trs = document.getElementsByTagName('tr'); for (i=0;i<trs.length;i++) { trs[i].onmouseover = function (event) { this.style.background = 'white'; } trs[i].onmouseout = function (event) { this.style.background = '#FCFDF7'; //Ici la couleur d'origine de la ligne } } </script>
Comme ça on peut continuer à construire des tables de la même manière qu'avant et mettre ce bout de code tout à la fin de la page ... C'est tout bête mais c'est pratique...
Si vous voulez spécifier une table en particulier ou une couleur en particulier on peut spécialiser la fonction ...
function highlightTable (monIdTable,colorUp,colorOut) { var elt = document.getElementById(monIdTable).firstChild; while (elt) { elt.onmouseover = function (event) { this.style.background = colorUp; } elt.onmouseout = function (event) { this.style.background = colorOut; } elt = elt.nextSibling; } }
Puis il faut modifier le tout si vous uilisez des tbody ou autre ...
Comments
Un petit truc sympa aussi pour pouvoir définir les couleurs à utiliser directement dans le TR si on veut utiliser des couleurs différentes:
trs = document.getElementsByTagName('tr');
for (i=0;i<trs.length;i++) {
trs[i].onmouseover = function (event) {
if(this.highlightColor!=null) {
this.style.background = this.highlightColor;
}
}
trs[i].onmouseout = function (event) {
if(this.normalColor!=null) {
this.style.background = this.normalColor; //Ici la couleur d'origine de la ligne
}
}
}
Et ensuite, dans la page HTML, soit on mets les deux attributs normalColor et highlightColor pour afficher les couleurs voulues:
<tr normalColor="white" highlightColor="gray">
soit on les met pas et dans ce cas la y aura pas de highlight.
Et pourquoi ne pas le faire en css ?
tr {
background : white;
}
tr:hover {
background : grey;
}
Et si on veux ne le faire que sur certains tableau on dénini une class.
Vous avez testé les deux solutions la sur tous les navigateurs ???
Parce que je suis certain que la solution de Pitijo ne fonctionne pas puisque IE n'interprète pas le hover sur autre chose que la balise a
La première je testerai mais je crois que les attributs personnalisés ne sont pas toujours bien perçu par tousu les navigateurs non plus ... Je teste et je recommente ... pas toudsuite hein ;)
Parce que la deuxième solution me paraissait largement plus accéptable ... on aurait ainsi bien respécté le principe CSSdesign vs HTMLstructure mais IE n'aime pas faciliter la tâche ... snif ...
Il me semble que sur OpenWeb ils expliquent comment contourner ce désagrément de IE en utilisant la balise a. Évidemment ils partent du principe que si on veut faire un highlight c'est sur un lien (ou quelque chose d'interractif).
Enfin je suis pas sûr que c'était directement sur OpenWeb, peut-être sur un site proche. Je pense que c'était dans un article où le but était d'expliquer comment faire des onglets dont la présentation possèdait une image en background (pour avoir des jolis coins arondis et transparents). La présentation dépendait notemment de la présence éventuelle de la souris sur l'onglet (avec :hover). Avec tout un bidouillage pour que IE accepte le :hover et permette de cliquer n'importe où sur l'onglet et pas uniquement sur son texte. C'était vraiment puissant comme truc, avec de superbes idées pour éviter le chargement d'une image lors du premier passage de la souris etc. Et le mieux (si je me souviens bien): aucun javascript !
(je déteste le js...)
De toute façon à quoi bon se crever à faire encore des sites "compatibles IE blabla" ? Moi je dis: respectez les standards et utilisez leur puissance. Les navigateurs doivent faire de même. (sans compter que de moins en moins de gens utilisent IE...)
PS.: cette fois j'ai mis l'adresse du wiki que j'ai créé pour ma FAC, regardez en bas à droite :-P (ou plutôt à côté des annonces google si vous êtes sous IE :-D)
C'est un avis personel mais un site a caractère public se doit d'être compatible tout navigateur ... la mention "trop cool pour IE" fait plus partie des sites perso ... C'est pas une peine infinie que de rendre son site compatible, c'est une habitude de développement ;)
>>(je déteste le js...)
J'ai du mal a comprendre pourquoi tant de gens n'aiment pas le javascript ? Serait-ce parce que ça demande un certain 'travail' pour le maitriser indépendamment du navigateur ? Puisque avec les fonctions communes a tous les naviagateurs il est déja possible de faire pas mal de choses ...
Je suis toujours intéressé par les nouveaux trucs alors si tu retrouves le lien de ce dont tu parles n'hésite pas ;) Personnellement j'utilise des solutions compatibles qui me permettent de développer rapidement quelque chose de propre ... Je sais qu'il est parfois possible de bidouiller un certain temps avec le CSS pour avoir la même chose, mais j'ai pas toujours ce temps la temps... macGyver inside ...