28218 sujets

CSS et mise en forme, CSS3

Changement de couleur sur clic dans un tableau [resolu]

Salut,

Je développe actuellement un Intranet 100% CSS et PHP. A la suite d'une requete, j'aimerais mettre mes données en forme (de manière tabulaire). J'utilise le tag HTML <table> et j'ai un fichier CSS décrivant les options pour table.

Mon but étant de pouvoir changer la couleur des lignes au passage de la souris et aussi de changer la couleur de ligne sur un clique (clique sur la ligne change la couleur et reclique remet l'ancienne couleur). Cette dernière fonctionnalité ne fonctionne pas, j'utilise :hover pour le survol et :active pour le clique. Le survol fonctionne mais pas le clique, dois-je utilisé :hover, :active... ?

Voici la classe CSS qui me permet de faire fonctionner le survol

.listing_red:hover, .listing_white:hover {
font-size: 9px ;
background-color: #6DCFF6 ; 
color: #000000 ;
}


Voilà, merci d'avance Smiley smile

JPWalker
Ride & Enjoy Smiley cligne
Modifié le 05 Nov 2004 - 08:41
:active ne fonctionnera pas sous IE mais sous les autres navigateurs à priori pas de problème, mais je suis pas sur à 100%

Sinon JavaScript, 1 petit ligne et le tour est joué.
Merci pour la réponse,

Ben j'utilise Firefox 0.8, donc a priori ça devrai marché. En fait j'ai essayer plusieurs trucs mais rien ne marche. J'ai ce code au niveau HTML :

<tr class="listing_white">....</tr>
<tr class="listing_red">...</tr>


une ligne en blanc une fois sur deux. Ca dans ma feuille CSS

.listing_red {
font-size: 9px ;
background-color: #FF92A9 ; 
}

.listing_white {
font-size: 9px ;
background-color: #FFFFFF ;
}

.listing_red:hover, .listing_white:hover {
background-color: #6DCFF6 ;
}

.listing_red:active, .listing_white:active {
background-color: #FFCC99 ;
}


Serait-il mieux de passer par des blocs au lieu de table, tr, td... ?

[EDIT] : et niveau JavaScript je peux trouver ça ou (je n'aime pas le Java...) Smiley decu
Modifié le 04 Nov 2004 - 17:42
Administrateur
jpwalker a écrit :

Serait-il mieux de passer par des blocs au lieu de table, tr, td... ?


Ça dépend de la nature des données. S'il s'agit de données considérées comme "tabulaires", autant utiliser des tableaux Smiley smile
Essai :focus plutot que :active au cas où.

Pour le JS (pas java, c'est autre chose, javascript => JS, Java => java !! )
tu peux faire ça :


function changeRowColor()
{
  trs = document.getElementById("id_de_ta_table").getElementsByTagName('tr') ;
  trs.onclick = function()
  {
    if(this.style.background != '#nlle_couleur')
    {
      this.style.background = '#nlle_couleur' ;
    }
    else
    {
      this.style.background = '#f00' ;
    }
  }
}
window.onload = changeRowColor ;


Un truc de ce style à adapter pour la 2eme couleur, fait un sujet dans le forum JavaScript si tu t'en sors pas juste avec les CSS, je passerais un peu plus de temps pour le faire propre et en détail.
Raphael a écrit :

Ça dépend de la nature des données. S'il s'agit de données considérées comme "tabulaires", autant utiliser des tableaux Smiley smile


Oui, tout à fait, se sont des données tabulaires. Mais, est-ce que ma démarche est bonne (:hover :active) ou suis-je dans le faut total ?
Smiley bawling
Par principe : CSS = Mise en forme ; JavaScript = Effet spéciaux

Le seul effet spécial "fiable" utilisabe en CSS et compatible tout navigateur, c'est l'utilisation de la pseudo class :hover sur la balise A.

Pour tous les autres cas, il faut utiliser du JavaScript.
Merci à tous !! Smiley cool

Je suis vraiment étonner de la rapidité du forum et de la sympathie de tous. Bravo !

Pour ce qui est de mon problème, je vais me tourner vers la solution JavaScript. Je vais poster dans le topic JS.

Encore un grand merci à tous Smiley cligne

JP

PS : je connais la diff entre JS et Java, mais c'est le mot "java" qui me donne des boutons.
Sujet clos
Aller à