Ce script est déclaré obsolète. Il n'est conservé que pour information.
Script : Changement de couleurs des lignes d'un tableau
Change la couleur de fond et de texte d'un tableau au passage de la souris sur les cellules ou les lignes
Exécution du script
Code source
<html><head><title>Tout JavaScript.com - Mouseover sur un tableau</title><STYLE> .tabnormal{background-color:white; color:navy; font-weight:bold} .tabover{background-color:red; color:white; font-weight:bold}</STYLE></HEAD><BODY text="navy" bgcolor="#FFFFFF" alink="#FF8C00" link="#FF8C00" vlink="#FF8C00"><FONT FACE="Arial" SIZE='-1' COLOR="navy"><CENTER><BIG><B>Mouseover sur un tableau</B></BIG><BR><BR><BR><BR>Fonctionne avec Netscape 6 et 7, Mozilla 1 et plus, Internet explorer 5 et plus.<BR>Passez la souris sur les lignes du tableau pour en changer la couleur de fond et de texte !<BR><TABLE border=1 cellpadding=3 cellspacing=0 style="border-width:1px;border-style:solid;border-color:navy"><TR class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'"> <TD> Ligne 1</TD> <TD> Première ligne</TD></TR><TR class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'"> <TD> Ligne 2</TD> <TD> Passez la souris </TD></TR><TR class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'"> <TD> Ligne 3</TD> <TD> Passez votre souris sur les lignes</TD></TR><TR class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'"> <TD> Ligne 4</TD> <TD> Ici aussi !</TD></TR></TABLE><BR><BR>La même chose maintenant mais uniquement par cellule de tableau<TABLE border=1 cellpadding=3 cellspacing=0 style="border-width:1px;border-style:solid;border-color:navy"><TR> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD></TR><TR> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD></TR><TR> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD></TR><TR> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD> <TD class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">Case 1</TD></TR></TABLE><BR><BR><TABLE><TR> <TD><FONT size=2>Principe :<BR> - On définit 2 styles (voir le <A href="http://www.toutjavascript.com/savoir/savoir11.php3" target=_blank>tutorial sur les feuilles de style de Tout JavaScript.com</A>)<BR> tabnormal => fond blanc, couleur de texte bleue<BR> tabover => fond rouge, couleur de texte blanche<BR> - On affecte le style tabnormal par défaut aux lignes ou aux cellules.<BR> - On détecte le passage de la souris par onmouseover et on change le nom du style.<BR> - Pareil quand la souris quitte la zone par onmouseout.<BR> </FONT></TD></TR></TABLE><BR><BR><BR><BR><BR><BR><BR><BR><CENTER><A href='http://www.toutjavascript.com' target='_blank'><FONT size=1 color=#CCCFFF>Tout JavaScript.com</FONT></A></FONT></BODY></HTML><!-- Script développé par Olivier Hondermarck --><!-- D'autres scripts et des conseils sur http://www.toutjavascript.com -->
Troisième édition Tout JavaScript chez Dunod
En savoir plusSortie le 4 janvier 2023
Version papier 29€90
Format électronique 22€99.
Commandez en ligneLe graph des objets JavaScript
Chargement
en cours...
