Franc83

Tableaux CSS

22-09-2008

Mouseover sur un tableau

Fonctionne avec Netscape 6 et 7, Mozilla 1 et plus, Internet explorer 5 et plus.
Passez la souris sur les lignes du tableau pour en changer la couleur de fond et de texte !

Ligne 1	Première ligne
Ligne 2	Passez la souris
Ligne 3	Passez votre souris sur les lignes
Ligne 4	Ici aussi !

La même chose maintenant mais uniquement par cellule de tableau

Case 1	Case 2	Case 3	Case 4
Case 5	Case 6	Case 7	Case 8
Case 9	Case 10	Case 11	Case 12
Case 13	Case 14	Case 15	Case 16

Principe :

- On définit 2 styles
tabnormal => fond gris, couleur de texte bleue
tabover => fond bleu, couleur de texte grise

- On affecte le style tabnormal par défaut aux lignes ou aux cellules.

- On détecte le passage de la souris par onmouseover et on change le nom du style.

- Pareil quand la souris quitte la zone par onmouseout.

Voici les codes à utiliser pour les styles css
à mettre dans le <head> :

<STYLE type="text/css">
.tabnormal {

background-color : #F0F0E0 ; color : #1E90FF ; font-weight : bold ;

}

.tabover {

background-color : #1E90FF ; color : #F0F0E0 ; font-weight : bold ;

}

</STYLE>

Puis dans votre section <body>, quand vous créez vos tableaux....

Voici les codes à utiliser pour les lignes rollover:

Voici les codes à utiliser pour les cases rollover:

<TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Contenu de la cellule</TD>

Voilà de quoi agrémenter le style de vos tableaux, et de colorer vos pages html....

Citez cet article

Commenter cet article

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront