changer l'image d'une div placé dans une class

**stephane1978** · 12/06/2012, 22h50

Bonjour,

Je suis novice en javascript et essai de changer une image placé dans une class grâce a css et affiché sur la page html par un div.

début d'exemple

Code html :

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

<div id="" class="img"></div>

Code css :

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

1
2
3
.img {
background: transparent url(img.png);
}

fin d'exemple

et le changement s'effectuerait par javascript suivant une récupération de données "activé ou désactivé" d'un fichier xml (ou autre).
Il y a 31 div à modifier individuellement d'ou je suppose 31 fichier.js à créer.

malgré les diverses lectures et tutos, je ne trouve pas mon bonheur.

Merci pour l'aide

Bien amicalement

**MaitreKaio** · 13/06/2012, 09h09

Je reformule ta question pour vérifier que j'ai bien compris:

Tu as dans ta page un certain nombre de div qui ont une image d'arrière-plan.
En réponse à la fin d'un traitement (par exemple récupération de fichier XML), tu souhaites changer l'arrière-plan de ces div

J'espère que c'est bien cà... Je pense à deux moyens de le faire:

Changer la propriété background-image des éléments de cette classe à la volée (avec un exemple en pur JS)
Déclarer dans la CSS une autre classe ayant l'arrière-plan que tu souhaites, et modifier la classe de tes éléments (avec un exemple en jQuery). Cette solution est plus propre à mon avis.

Modifier background-image en pur Javascript:

Code :

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

1
2
3
4
5
6
7
8
 
function changeImage() {
    var mydivs = document.getElementsByClassName("mydiv");
    for (var i = 0; i < mydivs.length; i++) {
        var currentDiv = mydivs[i];
        currentDiv.style.backgroundImage = 'url("semantics.png")';
    }
}

Attention, getElementsByClassName() ne fonctionnera pas sur les vieux navigateurs.

Changement de classe avec jQuery:
Dans la CSS:

Code :

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

1
2
3
4
5
6
7
 
.before {
    background: url(img1.png);
}
.after {
    background: url(img2.png);
}

Dans le code JS:

Code :

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

1
2
3
4
5
6
7
8
9
 
 function changeImage() {
    var mydivs = $(".before");
    for (var i = 0; i < mydivs.length; i++) {
        var currentDiv = $(mydivs[i]);
        currentDiv.removeClass("before");
        currentDiv.addClass("after");
    }
 }

**stephane1978** · 13/06/2012, 10h19

Malheureusement ça ne fonctionne pas.

voici le code

code 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!DOCTYPE HTML>
 
<html>
<head>
	<link id="stylesheet" type="text/css" rel="stylesheet" href="css/stylesheet.css" charset="utf-8">
</head>
<body>
<a  href="#">
<div id="wrapper">
	<div id="assist"></div>
	<div class="ht1">&Eacute;tat du syst&egrave;me</div>
	<div class="ht2">Connection</div>
	<div class="ht3"><div id="sod" class="check-on"></div>OpenDirectories</div>
	<div class="ht3"><div id="sad" class="check-un"></div>ActiveDirectories</div>
	<div class="ht3"><div id="sid" class="check-un"></div>Identification</div>
	<div class="ht3"><div id="sgp" class="check-off"></div>Gestionnaire de profils</div>
	<div class="ht3"><div id="sadmin" class="check-on"></div>Administrateurs</div>
	<div class="ht3"><div id="smod" class="check-off"></div>Mod&eacute;rateurs</div>
	<div class="ht3"><div id="sutl" class="check-off"></div>Utilisateurs</div>
	<div class="ht3"><div id="svst" class="check-un"></div>Visiteurs</div>
	<div class="ht2">Partage de fichier</div>
	<div class="ht3"><div id="afp" class="check-off"></div>AFP</div>
	<div class="ht3"><div id="ftp" class="check-off"></div>FTP</div>
	<div class="ht3"><div id="smb" class="check-off"></div>SMB</div>
	<div class="ht3"><div id="web" class="check-on"></div>WEB</div>
	<div class="ht3"><div id="nfs" class="check-off"></div>NFS</div>
	<div class="ht2">Serveur</div>
	<div class="ht3"><div id="mail" class="check-un"></div>Courrier</div>
	<div class="ht3"><div id="dhcp" class="check-un"></div>DHCP</div>
	<div class="ht3"><div id="dns" class="check-on"></div>DNS</div>
	<div class="ht3"><div id="contact" class="check-on"></div>Carnet d'adresse</div>
	<div class="ht3"><div id="ical" class="check-un"></div>iCal</div>
	<div class="ht3"><div id="ichat" class="check-un"></div>iChat</div>
	<div class="ht3"><div id="mdp" class="check-off"></div>Modification de MdP</div>
	<div class="ht3"><div id="ntbt" class="check-un"></div>NetBoot</div>
	<div class="ht3"><div id="msql" class="check-on"></div>MySQL</div>
	<div class="ht2">Services</div>
	<div class="ht3"><div id="firewall" class="check-on"></div>Coupe-feu</div>
	<div class="ht3"><div id="nat" class="check-un"></div>NAT</div>
	<div class="ht3"><div id="print" class="check-un"></div>Impression</div>
	<div class="ht3"><div id="majl" class="check-un"></div>Mise &agrave; jour logiciel</div>
	<div class="ht3"><div id="majs" class="check-un"></div>Mise &agrave; jour syst&egrave;me</div>
	<div class="ht3"><div id="rad" class="check-on"></div>Radius</div>
	<div class="ht3"><div id="vpn" class="check-off"></div>VPN</div>
	<div class="ht3"><div id="wojt" class="check-un"></div>WebObject</div>
	<div class="ht3"><div id="xgrid" class="check-un"></div>Xgrid</div>
	<div class="ht3"></div>
</div>
</a>
<script type="text/javascript" src="js/sys.js"></script>
</body>
</html>

code css

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
 
		html {
		}
		body {
			font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
			word-spacing: -1px;
		}
		#wrapper {
			margin: 200px auto 0px auto;
			border:0px;
			border-radius: 6px;
			-o-border-radius: 6px;
			-ie-border-radius: 6px;
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			padding: 10px 0px 30px 0px;
			width: 400px;
			min-height: 20px;
			max-height: 800px;
			background: #fcfcfc 0 0 repeat-x;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#efefef));
			box-shadow: 0 4px 20px rgba(0,0,0,0.5);
			-o-box-shadow: 0 4px 20px rgba(0,0,0,0.5);
			-ie-box-shadow: 0 4px 20px rgba(0,0,0,0.5);
			-moz-box-shadow: 0 4px 20px rgba(0,0,0,0.5);
			-webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.5);
			font-size: 1em;
			text-align: center;
		}
		#assist {
			margin: 10px 0px 0px 20px;
			float: left;
		    background: transparent url(img/assist.png) no-repeat;
			width: 52px;
			height: 80px;
		}
		#assistjs {
			margin: auto 0px auto 20px;
			float: left;
		    background: transparent url(img/assistjs.png) no-repeat;
			width: 52px;
			height: 80px;
		}
		.check-un {
			margin: 3px 15px 0px 0px;
			float: left;
		    background: transparent url(img/check075.png) -24px 0px no-repeat;
			width: 10px;
			height: 9px;
		}
		.check-off {
			margin: 3px 15px 0px 0px;
			float: left;
		    background: transparent url(img/check075.png) -12px 0px no-repeat;
			width: 10px;
			height: 9px;
		}
		.check-on {
			margin: 3px 15px 0px 0px;
			float: left;
		    background: transparent url(img/check075.png) 0px 0px no-repeat;
			width: 10px;
			height: 9px;
		}
		h1 {
			font-size: 18px;
			color: #696969;
			line-height: 20px;
			text-align: center;
		}
		h1:hover {
			text-decoration: none;
		}
		h2 {
			font-size: 12px;
			font-weight: bold;
			color: #696969;
			line-height: 14px;
			text-align: center;
		}
		h2:hover {
			text-decoration: none;
		}
		h3 {
			font-size: 11px;
			color: #696969;
			line-height: 12px;
			text-align: center;
		}
		h3:hover {
			text-decoration: none;
		}
		h4 {
			font-size: 11px;
			color: #696969;
			line-height: 12px;
			text-align: center;
		}
		h4:hover {
			text-decoration: none;
		}
		#h {
			margin: 0px auto 0px auto;
			position: absolute;
			right: 0px;
			bottom: 0px;
			left: 0px;
			width: 100%;
			height: 14px;
		}
		h5 {
			margin: 0px 0px 10px 0px;
			position: absolute;
			bottom: 0px;
			left: 20px;
			font-size: 10px;
			color: #fcfcfc;
			line-height: 11px;
			text-align: center;
		}
		h5:hover {
			text-decoration: none;
		}
		#icon {
			margin: -10px auto 0px auto;
		    background: transparent url(img/iconassist.png) no-repeat;
			width: 12px;
			height: 12px;
		}
		h6 {
			margin: 0px 0px 10px 0px;
			position: absolute;
			right: 20px;
			bottom: 0px;
			font-size: 10px;
			color: #fcfcfc;
			line-height: 11px;
			text-align: center;
		}
		h6:hover {
			text-decoration: none;
		}
		.ht1 {
			margin: 15px auto 10px auto;
			font-size: 18px;
			font-weight: bold;
			color: #696969;
			line-height: 20px;
			text-align: center;
		}
		.ht1:hover {
			text-decoration: none;
		}
		.ht2 {
			margin: 10px 0px 5px 100px;
			font-size: 12px;
			font-weight: bold;
			color: #696969;
			line-height: 14px;
			text-align: left;
		}
		.ht2:hover {
			text-decoration: none;
		}
		.ht3 {
			margin: 2px 0px 0px 120px;
			font-size: 11px;
			font-weight: normal;
			color: #696969;
			line-height: 12px;
			text-align: left;
		}
		.ht3:hover {
			text-decoration: none;
		}
		p {
			margin: 0px 0px 0px 0px;
			text-decoration: none;
		}
		a {
			margin: 0px 2px 0px 2px;
			font-size: 10px;
			color: #fcfcfc;
			line-height: 11px;
			text-align: center;
			text-decoration: none;
		}
		a:hover {
			font-size: 10px;
			color: #fcfcfc;
			line-height: 11px;
			text-align: center;
			text-decoration: underline;
		}

code js

Code :

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

1
2
3
4
5
6
7
/*!
 * sys vers:1.0.1
 *
 * MonSite
 */
version:"1.0.1";
document.body.style.background = "transparent url(WBackground.png) repeat";

Si vous avez une idée ?

Mon but au final (après avoir réussi à modifier ces div) serais de transformer le css en js (sur quoi je me penche actuellement).
Je suis dessus depuis samedi dernier et je cale car je ni connais pas grand chose en js, je trouve se langage génial pourtant mais j'ai du mal.
html et css pas de souci.

Merci pour l'aide

**MaitreKaio** · 13/06/2012, 10h35

Les solutions que j'ai donné fonctionnent, pour la bonne raison que j'essaie toujours avant de poster une réponse.
Je ne vois pas ce que je suggère dans le code que tu postes, ça peut donc difficilement marcher.
Je n'ai pas envie de lire 100 lignes de code source fournies sans aucune explication, là ou il aurait suffi d'extraire les infos pertinentes pour ton problème.
Ma suggestion: essaie de te faire une petite page d'essai, essaie de comprendre comment ça marche (je suis prêt à répondre à des questions sur le code que je te propose) et éventuellement viens chercher de l'aide à nouveau.

**stephane1978** · 13/06/2012, 11h17

Recoucou,

en bidouillant dans tous les sens ta fonction et du peut que je connais en js, j'ai trouvé tout simple.

code js

Code :

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

document.getElementById('sid').className = 'check-un';

maintenant il faut que je trouve le moyen de récupérer les données d'un fichier pour faire changer l'état de la class. Que penses-tu d'un fichier json plus tôt que xml ?? plus facile ou non ?? ou as-tu plus simple.

Je vais essayer de bidouiller avec ta fonction si je trouve qqchose.

Le jquery ne fonctionne pas.

changer l'image d'une div placé dans une class

JavaScript

Discussions similaires

Partager

Partager