Retrouver valeurs CSS

Version imprimable

02/05/2008, 09h24
L8O8L

Retrouver valeurs CSS

Bonjour,

J'aurais voulu savoir si apres avoir appliqué un style background en javascript à un <tr>, il était possible de retrouver (en JAVASCRIPT) le style CSS d'origine ?
Pour explication, je veux faire un onMouseOn et onMouseOut sur un élement et pour le onMouseOut je voudrais retrouver les valeurs d'origine.

MERCIIIIIIIIII
02/05/2008, 09h30
SpaceFrog

sur le onmouseover stocke le CSS d'origine dans une propriété du tr

Code:

onmouseover="this.defaultBGC=this.style.backgroundColor;this.style.backgroundColor=couleurvariable ...

et du coup:

Code:

onmouseout="this.style.backgroundColor=this.defaultBGC"
02/05/2008, 10h06
L8O8L

hummm... merci c'est une bonne idée!! :D

Je ne savais pas que un élement HTML pouvait avoir un attribut supplémentaire... Et mon code non plus on dirait :?

Pour info voici mon code
Code:

1 2 3 4 <?php $aRetourner .= '<area shape=rect coords="'.$gauche.','.($haut+5).','.$droit.','.$bas.'" onMouseOver="javascript:document.getElementById(\''.$this->idLignesPrInteraction[$i].'\').defaultBGC = document.getElementById(\''.$this->idLignesPrInteraction[$i].'\').style.background; alert(document.getElementById(\''.$this->idLignesPrInteraction[$i].'\').defaultBGC);">'; ?>
Certe je n'ai pas fait le onMouseOut, mais en fait l'alert est vide... :roll:
Bien sur c'est contenu dans une balise map qui marche...

un souci de mise en oeuvre ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<table style="border-collapse:collapse;">
	<tr style='background-color:red' onmouseover="this.DefaultColor=this.style.backgroundColor;this.style.backgroundColor='white';" onmouseout="this.style.backgroundColor=this.DefaultColor;">
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
	<tr style='background-color:blue' onmouseover="this.DefaultColor=this.style.backgroundColor;this.style.backgroundColor='white';" onmouseout="this.style.backgroundColor=this.DefaultColor;">
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
	<tr style='background-color:yellow' onmouseover="this.DefaultColor=this.style.backgroundColor;this.style.backgroundColor='white';" onmouseout="this.style.backgroundColor=this.DefaultColor;">
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
	<tr style='background-color:green' onmouseover="this.DefaultColor=this.style.backgroundColor;this.style.backgroundColor='white';" onmouseout="this.style.backgroundColor=this.DefaultColor;">
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
	<tr style='background-color:pink' onmouseover="this.DefaultColor=this.style.backgroundColor;this.style.backgroundColor='white';" onmouseout="this.style.backgroundColor=this.DefaultColor;">
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
 
</table>

02/05/2008, 10h35
L8O8L

Ou alors dans ce cas... Existe-t-il quelque chose en javascript permettant d'activer un hover ?...
02/05/2008, 10h37
SpaceFrog

une balise a ...
02/05/2008, 10h40
L8O8L

Humm... Pas possible à mettre en place...
En fait j'ai une zone cliquable (image map) et un tableau.
Je veux que la zone cliquable mette en hover le tableau quand on passe dessus.
Cependant, je ne peux pas modifier le tableau...
02/05/2008, 10h41
SpaceFrog

tu peux modifier dynamiquement le onmouseover / onmouseout des tr du tableau
02/05/2008, 10h45
L8O8L

Merci de t'interressé à mon problème c'est sympa ;)

Mais => pourquoi le code que j'ai mis ne marche pas?
=> même si je modifie les onMouseOver et onMouseOut du tableau, il faudra quand même bien les activer. Mais comment ? La zone cliquable et le tableau ne sont pas au même endroit

Un exemple de modification dynamique des over et out

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script type="text/javascript">
function populateTR(){
TabTR=document.getElementsByTagName('tr');
TRL=TabTR.length
for(i=0;i<TRL;i++){
	TabTR[i].onmouseover=function(){
										 this.DefaultBGColor=this.style.backgroundColor;
										 this.style.backgroundColor='white';
										 }
 
   TabTR[i].onmouseout=function(){
										 this.style.backgroundColor=this.DefaultBGColor;
										 }
   }
  }
 
</script>
 
</head>
 
<body onload="populateTR()">
<table style="border-collapse:collapse;">
	<tr style='background-color:red' >
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
	<tr style='background-color:blue'>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
	<tr style='background-color:yellow' >
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
	<tr style='background-color:green' >
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
	<tr style='background-color:pink' >
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
		<td>coucou</td>
	</tr>
 
</table>

J'ai pas vraiment saisi ce que tu veux faire sur le click de l'area ...
tu aurais un exemple ??

02/05/2008, 12h09
L8O8L

En fait le tableau correspond à un relevé de valeurs.
En dessous il y a un graphe avec artichow donc une image.
Je défini ensuite des zones sur l'image qui vont être sensible à la souris (légende et points du graphes)
Je veux que quand on amène la souris sur l'élement de la légende X la ligne X se mette en évidence sur mon tableau.
En gros pas besoin de cliquer

C'est assez clair?
02/05/2008, 13h29
SpaceFrog

tes trs ont des ids ou pas ?
comment associes tu une ligne à une area ?
05/05/2008, 08h46
L8O8L

Désolé de répondre seulement je n'avais pas accès au net ce w-e
Oui mes tr ont des id. Et oui j'associe les lignes aux area.
Mais voila j'arrive toujours pas à récupérer les couleurs d'avant
05/05/2008, 10h24
L8O8L

Ca y est.
J'ai créer une fonction qui contient le tableau de rgb correspondant en javascript sinon j'y arrivais pas.
Il faudra quand même voir pour une autre technique car je doute que ca marche pour l'appli finale... >_<
05/05/2008, 10h46
SpaceFrog

ben simplement stocker la valeur courante dans un attribut de la balise ..