Franc83


Tableaux CSS Convertir en PDF Version imprimable
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 1Première ligne
Ligne 2Passez la souris
Ligne 3Passez votre souris sur les lignes
Ligne 4Ici aussi !


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

 

Case 1Case 2Case 3Case 4
Case 5Case 6Case 7Case 8
Case 9Case 10Case 11Case 12
Case 13Case 14Case 15Case 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.

<!-- Script développé par Olivier Hondermarck -->





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:

<TR class="tabnormal" onmouseover="this.className='tabover'" onmouseout="this.className='tabnormal'">

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:Web AddressEmail AddressBold TextItalic TextUnderlined TextQuoteCodeOpen ListList ItemClose List
Commentaire



Code:* Code
Je désire être prévenu par mail des commentaires qui suivront

Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved

 
< Précédent   Suivant >

Liens amis

Compteur.org

e-dilik.fr

NetFox2.net

IgloOps.fr

Infostuces

Mixx Radio Gold

Mobile Astuces

-------------

Votre site ici

Notre logo

Aide et astuces pour  blogs

Cliquez droit dans la zone où se trouve le code html et "copier"


Nos autres Logos...

S'abonner

devenir amis sur facebook

Votre adresse email ici pour recevoir les nouveautés du site directement dans votre boite

Nos Gadgets

Installez nos gadgets

gratuits Live Spaces

albi-gadget.jpg

Albidochon

oeil2moscou.jpg

Oeil 2 Moscou

Aidez-nous

aidez-nous

Recommandez ce
site à un ami

Statistiques

Powered By PageCache
Generated in 0.36369 Seconds