css dans Javascript

Version imprimable

css dans Javascript

Bonjour,
J'ai un script java script dans lequel j'essaie d'appeler un style css.. comme cela ( la problèmatique globale est décrite avec plus de précision dans le forum HTML) :

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
dans le *.css:
#ton_nom{
	background: url(IHMWebTx.JPG) no-repeat top left; /* image avec les voyants éteints */
	width:300px; height:150px; /* taille de ton image de fond */
	margin:0 auto; /* pour le centrage horizontal */
	position:relative; /* pour qu'elle serve de référence au positionnement des images */
}
 
#system img {
  position:absolute;
  top:60px;
  visibility:hidden; /* cachée par défaut */
}
 
#l3 {
  position:relative;
  left:200px;
  visibility:visible; /* la led 3 est allumée */
}
 
dans le fichier "principal":
 
<script type="text/javascript">
function ConfigLed(val) {
if(val)
{
	Led_image=new Image(104,102);
	Led_image.src="Led.jpg";
	document.write('<img src=\"'+Led_image.src+'\" alt=\"voyant 1\" width=\"20\" height=\"20\" id=\"l3\">');
}
else
{
	Led_image=new Image(104,102);
	Led_image.src="Led3.jpg";
	document.write('<img src=\"'+Led_image.src+'\" alt=\"voyant 1\" width=\"20\" height=\"20\" id=\"l3\">');
}
</script>

09/10/2006, 11h52
Bisûnûrs

Oui et ?
09/10/2006, 14h09
Auteur

Citation:

J'ai un script java script dans lequel j'essaie d'appeler un style css.. comme cela ( la problèmatique globale est décrite avec plus de précision dans le forum HTML) :

quel sujet ? Ne mets pas ton bout de code JS dans le forum JS et ton code HTML dans le forum HTML. Chosis un forum et place tout ton code et dis nous ce qui ne va pas.
09/10/2006, 14h49
zodd

désolé.. j'ai posté un peu rapidement.. et j'ai oublié de mettre la question.. ca va je ->..:oops:

En fait tout ca pour dire que le style css n'est pas pris en compte qd il est placé ds mon script.. donc si vous avez une idée..
09/10/2006, 15h19
SpaceFrog

document.write .... :vomi:

colle la balise dans la page avec un display none, puis modifies dynamiquement le className ou le ccsText ou encore juste la propriété de style souhaitée , bascule ensuite le display à block ....
09/10/2006, 15h30
zodd

heu..je suis un newbie dans le domaine.. un exemple m'aiderai beaucoup.. :D même si c'est peut etre en contradiction avec ta signature.. ;)
09/10/2006, 15h39
SpaceFrog

un exemple je veux bien, mais il faudrait pour cela que je comprenne ce que tu veux faire ...
hors dasn l'exemple de code que tu as donné ... il n'y a pas de différence entre le if et le else ... les styles sont les mêmes ...

decris moi l'effet recherché ...
09/10/2006, 15h48
Bisûnûrs

Citation:

Envoyé par SpaceFrog

un exemple je veux bien, mais il faudrait pour cela que je comprenne ce que tu veux faire ...
hors dasn l'exemple de code que tu as donné ... il n'y a pas de différence entre le if et le else ... les styles sont les mêmes ...

decris moi l'effet recherché ...

Je ne suis pas sûr ... Mais le style doit être le même dans les deux cas, seule l'image change.
Mais apparemment le style ne se charge dans aucun des cas.
09/10/2006, 16h00
SpaceFrog

le DOM ne se rafraichit pas avec un document.write ...

il faut soit mettre la balise en dur dasn la page et juste modifier le scr soit faire un createElement ...
09/10/2006, 17h56
zodd

En fait,
j'ai une meta refresh entre les balises de head..
Et toutes les 3 secondes je reçoit un paramètre.
En fonction de ce paramètre, j'affiche une image de voyant allumé ou une image de voyant éteint... Le problème c'est pour positionner ce voyant.. dans les deux cas le style est le même.. Si le positionnement est important c'est parceque le voyant doit prendre une place bien particuliere par rapport à l'arrière plan..
09/10/2006, 18h43
SpaceFrog

ben mets ta balise en dur dans le code et modifies juste le src ... en fonction de la variable reçue ...

le problème c'est que je ne comprend pas ce que tu me suggeres...
Je ne vois pas comment mettre la balise en dur et modifier le source... pour info, le source sur le serveur ne peut pas être modifié.... il me renvoie juste des paramètres..

voici mon source actuel :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
 
ds le css:
 
#system{
  background: url(IHMWebTx.JPG) no-repeat top left;
  width:300px; height:150px;
  margin:0 auto;
  position:relative;
}
 
#system img{
  position:absolute;
  top:60px;
  visibility:hidden;
}
 
#l1{left:20px;}
#l2{left:60px;}
#l3{left:100px;}
#l4{left:140px;}
 
ds le *.cgi
<html>
<head>
<meta http-equiv="refresh" content="3">
<link rel="stylesheet" type="text/css" href="style_div.css">
<script type="text/javascript">
function ConfigLed(val) {
if(val)
{
	Led_image=new Image(104,102);
	Led_image.src="Led.jpg";
	document.write('<img src=\"'+Led_image.src+'\" alt=\"voyant 1\" width=\"20\" height=\"20\" id=\"l3\">');
}
else
{
	Led_image=new Image(104,102);
	Led_image.src="Led3.jpg";
	document.write('<img src=\"'+Led_image.src+'\" border=\"0\" alt=\"Led\">');
}
}
function ConfigLedB(val) {
if(val)
{
	Led_image=new Image(104,102);
	Led_image.src="Led2.jpg";
	document.write('<img src=\"'+Led_image.src+'\" border=\"0\" alt=\"Led\">');
}
else
{
	Led_image=new Image(104,102);
	Led_image.src="Led.jpg";
	document.write('<img src=\"'+Led_image.src+'\" border=\"0\" alt=\"Led\">');
}
}
</script>
</head>
 
<body>
 
<table>
<br>
<br>
<br>
 
 
	<tr>
        	<td><span style="color: rgb(0, 0, 0);">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Id2=%01</span></td>
    	</tr>
</table>
 
 
 
<table>
 
<script type="text/javascript">
ConfigLed((%00)||(%01)||(%02));
</script>
 
<script type="text/javascript">
ConfigLed((%01)||(%02));
</script>
 
<script type="text/javascript">
ConfigLed(false);
</script>
 
<script type="text/javascript">
ConfigLed(%02);
</script>
 
<script type="text/javascript">
ConfigLedB(!((%00)||(%01)||(%02)));
</script>
 
<script type="text/javascript">
ConfigLedB(!((%01)||(%02)));
</script>
 
<script type="text/javascript">
ConfigLedB(!(%02));
</script>
 
<script type="text/javascript">
ConfigLedB(!(%02));
</script>
 
 
 
</table>
 
 
 
<table>  
 
<script type="text/javascript">
ConfigLed(false);
</script>
</table>
 
 
<table>
 
 
        <td><span style="color: rgb(0, 0, 0);">P.émise :</span></td>
        <td><span style="color: rgb(0, 0, 0);">%03</span></td>
	<td><span style="color: rgb(0, 0, 0);">dB</span></td>
 
  	<td><span style="color: rgb(0, 0, 0);">P.réfléchie :</span></td>
        <td><span style="color: rgb(0, 0, 0);">%04</span></td>
	<td><span style="color: rgb(0, 0, 0);">dB</span></td>	
 
 
 
 
</table>  
 
</tr>

09/10/2006, 20h21
SpaceFrog
engros ce que je te suggère..;

dans le body de la page

Code:

<img src="" class="maclasse" id="monimage" />

puis dans le script :
Code:

1 2 3 4 <script type="text/javascript"> function ConfigLed(val) { document.getElementById('monimage').src=(val)?"Led.jpg":"Led3.jpg"; }
09/10/2006, 23h00
zodd

ok merci. je teste ca dés demain;)