css dans Javascript

**zodd** · 09/10/2006, 10h39

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 :

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

**Bisûnûrs** · 09/10/2006, 10h52

Oui et ?

**Auteur** · 09/10/2006, 13h09

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.

**zodd** · 09/10/2006, 13h49

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

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

**SpaceFrog** · 09/10/2006, 14h19

document.write ....

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

**zodd** · 09/10/2006, 14h30

heu..je suis un newbie dans le domaine.. un exemple m'aiderai beaucoup..

même si c'est peut etre en contradiction avec ta signature..

**SpaceFrog** · 09/10/2006, 14h39

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

**Bisûnûrs** · 09/10/2006, 14h48

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.

**SpaceFrog** · 09/10/2006, 15h00

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

**zodd** · 09/10/2006, 16h56

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

**SpaceFrog** · 09/10/2006, 17h43

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

**zodd** · 09/10/2006, 18h07

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 :

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

**SpaceFrog** · 09/10/2006, 19h21

engros ce que je te suggère..;

dans le body de la page

Code :

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

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

puis dans le script :

Code :

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

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

**zodd** · 09/10/2006, 22h00

ok merci. je teste ca dés demain

css dans Javascript

JavaScript

Discussions similaires

Partager

Partager