Discussion :

[yodark]

Bonjour à tous,

J'ai une petite question
Coment creer un effet du survol sur un ligne d'un tableau en changant la couleur de fond? J'ai essayé de mettre .hover mais seul les images changent de fond...

Merci d'avance
Yodark

[stoeck]

ben deja c'est :hover, et cette technique est pas terrible sous IE,

si ta cellule fait lien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.tacellule a{display:block
width; largeur;
height:hauteur;
background-color; #XXXXXX;}
 
.tacellule a:hover{
background-color:#YYYYYY;}

la propriéte hover ne s'appliquant que sur a et img de memoire dans IE;
en CSS3 elle devrait s'etendre au autre éelement mais pas pour l'instant..

[yodark]

comment faire pour que la cellule fasse lien ? je suis obligé de faire un block CSS ca ne marche pas sur un tableau html?

[yodark]

j'ai vu dans un tutorial video appliquer du css sur un tableau permettant de mettre des case en surbrillance

[crashyear]

J'ai une solution pour toi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function surligner(val){
	var tr = document.getElementById(val);
	tr.style.background = "#006699";
}
function desurligner(val){
	var tr = document.getElementById(val);
	tr.style.background = "#FFFFFF";
}

Et sur ta balise <TR> tu mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<TR id='1' onmouseover='surligner(1)' onmouseout='desurligner(1)'>

Et si tu veux créer un lien sur ta ligne tu peux je crois utliser le "onclick="

J'espère que ca pourra t'aider.

[trotters213]

J'ajouterais quelques petites corrections au code de crashyear :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function surligner(obj){
	obj.style.backgroundColor= "#006699";
}
function desurligner(obj){
	obj.style.backgroundColor= "#ffffff";
}

Et sur ta balise <tr> tu mets :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr onmouseover='surligner(this)' onmouseout='desurligner(this)'>...</tr>