Retrouver valeurs CSS

**L8O8L** · 02/05/2008, 09h24

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

**SpaceFrog** · 02/05/2008, 09h30

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

Code :

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

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

et du coup:

Code :

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

onmouseout="this.style.backgroundColor=this.defaultBGC"

**L8O8L** · 02/05/2008, 10h06

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

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

**L8O8L** · 02/05/2008, 10h14

Pour info voici mon code

Code :

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

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...

Bien sur c'est contenu dans une balise map qui marche...

**SpaceFrog** · 02/05/2008, 10h18

un souci de mise en oeuvre ?

Code :

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

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>

**L8O8L** · 02/05/2008, 10h35

Ou alors dans ce cas... Existe-t-il quelque chose en javascript permettant d'activer un hover ?...

**SpaceFrog** · 02/05/2008, 10h37

une balise a ...

**L8O8L** · 02/05/2008, 10h40

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...

**SpaceFrog** · 02/05/2008, 10h41

tu peux modifier dynamiquement le onmouseover / onmouseout des tr du tableau

**L8O8L** · 02/05/2008, 10h45

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

**SpaceFrog** · 02/05/2008, 11h18

Un exemple de modification dynamique des over et out

Code :

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

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 ??

**L8O8L** · 02/05/2008, 12h09

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?

**SpaceFrog** · 02/05/2008, 13h29

tes trs ont des ids ou pas ?
comment associes tu une ligne à une area ?

**L8O8L** · 05/05/2008, 08h46

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

**L8O8L** · 05/05/2008, 10h24

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... >_<

**SpaceFrog** · 05/05/2008, 10h46

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

Retrouver valeurs CSS

JavaScript

Discussions similaires

Partager

Partager