Comment insérer un code dans une page html pour agrandir une image au survol

Heyho13 · 16/04/2011, 18h26

Bonjour,
Après avoir fait ma petite présentation rapide, j'ai en effet besoin d'aide surtout de comprendre, car pour moi le langage HTML dur dur.
Je vous explique, j'ai créer un site avec un hébergeur "LWS", et le site a été fait avec leur propre logiciel "site creator", je voudrais savoir comment faire pour mettre des photos qui au survol de la souris s'agrandisse, j'ai beau consulté tout les forums possible et imaginable il vous donne un code a mettre entre les balises <head> et /<head> or je n'ai pas ses fameuse balises....
Quelqu'un pourrait-il m'aider a comprendre???
Merci par avance de votre aide et à bientôt.

kOrt3x · 16/04/2011, 22h02

Dans toutes pages HTML, tu dois avoir ces balises <head></head> ou alors les pages sont fait très salement.

12monkeys · 16/04/2011, 23h53

Bonsoir

Quand tu fais un clic droit sur ta page, tu verra une option Code source de la page ou équivalent. Là tu verra le code HTML et... la balise <head>...

Pour insérer le code trouvé, il faut que tu modifies le code source de ta page toi même et non avec le "logiciel" de ton hébergeur. Pour faire çà tu dois récupérer le code de ta page (si ce n'est pas déjà fait) : un simple enregistrer sous de ta page, au format html suffira. Pour modifier la page tu l'ouvres simplement avec un éditeur de texte (le bloc notes de windows par exemple, mais plus conseillé un éditeur spécialisé comme notepad++)

Un tutoriel pour débutant : http://g-rossolini.developpez.com/tu...ant/?page=html
Un sur le HTML : http://j-willette.developpez.com/tut...bases-du-html/

Heyho13 · 17/04/2011, 10h13

Bonjour,
Merci kOrt3x et 12monkeys de votre réponse en effet en faisant un clic droit j'ai bien code source de la page, mais cela affiche des tas de code partout, alors la difficulté pour moi serais où et quel code mettre pour qu'une photo s'agrandisse au passage de la souris??

Alors si vous pouvez m'éclairer je suis preneur et merci pour tout ce que vous faite pour des novices comme nous c'est super sympa!

ledisciple · 17/04/2011, 11h24

Je pense que le code que tu as trouvé est du javascript. Je pense que le mieux serait d'utiliser le css et là

est ton ami :

http://www.google.fr/search?hl=fr&client=opera&rls=fr&channel=suggest&sa=X&ei=z7CqTcbyEJDoOY-F6PMJ&ved=0CBYQBSgA&q=Zoom+d%27images+avec+les+CSS&spell=1

Si après, tu comprends pas les codes donnés sur les premières pages de ce célèbre moteur de recherche, je te conseille vivement les liens donnés par 12monkeys. sinon tu pourras pas progresser

12monkeys · 17/04/2011, 11h32

En effet c'est aussi possible en CSS, tu as quelques exemples ici :

http://plambert.developpez.com/tutor...et-zoom-image/
http://plambert.developpez.com/css-d.../?page=page_11
http://plambert.developpez.com/css-d.../?page=page_12

Heyho13 · 17/04/2011, 12h31

Merci des réponses ledisciple et 12monkeys, y a une chose que j'aurais dû préciser, je viens de réagir et pardon de ne pas l'avoir fait auparavant, je suis photographe professionnel et je viens de m'installer a mon compte, alors pour la photo pas de souci je suis calé mais pour la programmation c'est autre chose, donc comme je l'avais dis au début, j'ai créer mon site avec l'hébergeur LWS(je sais pas s'il y en a qui connaissent), une fois mon nom de domaine héberger, ce site vous propose de créer votre propre site via leur logiciel "Site Creator" donc j'ai réussi et faire mes menus et sous-menus reste a faire la page pour inclure mes photos et c'est là la grosse difficulté pour moi, en faisant un clic droit en effet j'ai la page de code source, youpi j'ai déjà réussi a faire ça grâce au conseil de 12monkeys, mais ensuite ou je mets et comment mettre le code pour que les photos s'agrandisse au passage de la souris, mais aussi comme je le disais je suis photographe donc les clients qui vont aller sur le site ont une autorisation pour reprendre certaines photos, donc il faudrait qu'en cliquant sur la photo 1) elles s'agrandissent et de 2) ils peuvent aussi l'enregistrer sous..
Je sais j'en demande beaucoup mais c'est un peu complexe pour moi et je préfère me référencer à des professionnels en la matière.
Merci encore de vos aides que j'apprécie énormément.

laurentSc · 17/04/2011, 13h36

Citation:

Pour insérer le code trouvé, il faut que tu modifies le code source de ta page toi même et non avec le "logiciel" de ton hébergeur

Moi aussi j'utilise un logiciel pour générer des sites web (Lauyan Toweb ), mais il permet d'insérer du code dans le head des pages.
Je pense que pour afficher une photo agrandie lors de son survol, c'est un rollover javascript et pour avoir la possibilité de l'enregistrer sans avoir à faire un clic droit, c'est faisable en PHP...(ni en html, ni en javascript)

12monkeys · 17/04/2011, 15h41

J'avais bien compris que tu débutait dans le domaine

Je ne connais pas ton hébergeur ni le logiciel qu'il met à disposition pour créer des pages. Peux tu avec celui ci modifier le code source de tes pages ? C'est à dire insérer manuellement des balises html ?

Si non il va falloir comme je te l'ai dit plus haut

Citation:

Envoyé par 12monkeys

Pour faire çà tu dois récupérer le code de ta page (si ce n'est pas déjà fait) : un simple enregistrer sous de ta page, au format html suffira. Pour modifier la page tu l'ouvres simplement avec un éditeur de texte (le bloc notes de windows par exemple, mais plus conseillé un éditeur spécialisé comme notepad++)

Une fois ta page modifiée pour voir le résultat en ligne il faut transférer ta page sur l'espace ftp que LWS te met à disposition, et ce grâce à un logiciel de transfert ftp comme filezilla.

Pour ce qui est de la modification en elle même je ne sais pas ce que tu as téléchargé comme script. Mais pour les balises <head> et </head> elles se trouvent au début du document dans le code source. Tu trouvera ici la structure d'un document HTML : http://j-willette.developpez.com/tut...ge=page_1#LI-B et ici comment insérer un script javascript : http://j-willette.developpez.com/tut...=page_3#LIII-B

Pour ton autre question il vaut mieux faire étape par étape, non ?

Heyho13 · 17/04/2011, 16h11

Merci a tous de vos réponse et d'essayer de m'aider

En effet vaut mieux allez étapes par étapes donc je vais être un peu plus explicite:
Quand j'ouvre mon site sur le côté a droite il y a 4 menu :
- Accueil.
- Galeries photos.
- Tarifs et prestations.
- Contact.
Sous Galeries photos il y des sous-menu :
Mariages.Baptêmes.Communions.Naissances.Grossesses.
Donc si je clic sur galeries photos et sur le sous menu Baptêmes il affiche une page indiquant que le site est en construction, jusque là normal sur cette même page si je fais un clic droit et que je fais afficher code source voilà ce que j'obtiens :

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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
<a href="http://www.freecsstemplates.org" target="_blank">http://www.freecsstemplates.org</a>
Released for free under a Creative Commons Attribution 2.5 License
 
Title      : The Manor
Version    : 1.0
Released   : 20070331
Description: A two-column fixed-width template. Suitable for blogs and small business websites.
 
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<TITLE>Baptêmes. &raquo; Freddy Photographie - Immortalise vos évènements.</TITLE>
    <style>
	/*
Design by Free CSS Templates
<a href="http://www.freecsstemplates.org" target="_blank">http://www.freecsstemplates.org</a>
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	margin: 0;
	padding: 0;
}
 
body {
	background: #FBE8E8 url(images/img01.jpg);
	text-align: justify;
}
 
body, input, textarea, select {
	font: normal small Georgia, "Times New Roman", Times, serif;
	color: #662C14;
}
 
h1, h2, h3 {
	margin-bottom: 1em;
	font-weight: normal;
}
 
h1 {
	font-size: 2.2em;
}
 
h2 {
	font-size: 1.7em;
}
 
h3 {
	font-size: 1.3em;
}
 
p, blockquote, ul, ol, form {
	margin-bottom: 1.5em;
}
 
blockquote, ul, ol {
	margin-left: 3em;
}
 
blockquote {
	margin-right: 3em;
	font-style: italic;
}
 
ul {
	list-style-type: square;
}
 
a {
	color: #662C14;
}
 
a:hover {
	text-decoration: none;
}
 
hr {
	display: none;
}
 
.hr {
}
 
img.left {
	float: left;
	margin: 0 15px 15px 0;
}
 
img.right {
	float: right;
	margin: 0 0 15px 15px;
}
 
/* Wrapper */
 
#wrapper {
	padding: 20px 0;
	background: url(images/img02.jpg) repeat-x;
}
 
/* Header */
 
#header {
	width: 700px;
	height: 160px;
	margin: 0 auto;
	background: url(images/img03.gif) no-repeat;
}
 
#header h1, #header h2 {
	margin: 0;
}
 
#header h1 {
	padding-top: 40px;
	text-align: center;
	font-size: 4em;
}
 
#header h2 {
	text-align: center;
	font-size: 1em;
	font-style: italic;
}
 
#header a {
	text-decoration: none;
}
 
/* Content */
 
#content {
	width: 700px;
	margin: 0 auto;
	background: #FBE8E8 url(images/img04.gif) repeat-y;
}
 
/* Blog */
 
#blog {
	float: right;
	width: 424px;
	padding: 50px 20px 0px 16px;
	background: url(images/img06.gif) no-repeat;
}
 
/* Post */
 
.post {
	margin-bottom: 20px;
	padding-bottom: 20px;
	background: url(images/img08.gif) no-repeat center bottom;
}
 
.post .title {
	margin-bottom: 15px;
	padding-left: 15px;
	border-bottom: 1px solid #D3B6AF;
	text-transform: uppercase;
	font-size: small;
	font-weight: bold;
}
 
.post .title a {
	text-decoration: none;
}
 
.post .title a:hover {
	text-decoration: underline;
}
 
.post .date {
	margin-top: -30px;
	padding-right: 15px;
	text-align: right;
	font-size: x-small;
}
 
.post .entry {
	padding: 20px 15px 10px 15px;
	line-height: 1.8em;
}
 
.post .meta {
	margin-bottom: 2em;
	padding: 0 15px;
	text-align: right;
	font-size: x-small;
}
 
/* Sidebar */
 
#sidebar {
	float: left;
	width: 204px;
	padding: 50px 16px 0px 20px;
	background: url(images/img05.gif) no-repeat;
}
 
#sidebar ul {
	margin: 0;
	list-style: none;
}
 
#sidebar li {
	margin-bottom: 20px;
}
 
#sidebar li ul {
	padding-left: 5px;
	line-height: 1.4em;
}
 
#sidebar li li {
	margin: 0;
	padding-left: 12px;
	background: url(images/img07.gif) no-repeat left center;
}
 
#sidebar h2 {
	margin-bottom: 15px;
	padding-left: 5px;
	border-bottom: 1px solid #D3B6AF;
	text-transform: uppercase;
	font-size: small;
	font-weight: bold;
}
 
#sidebar a {
	text-decoration: none;
}
 
#sidebar a:hover {
	text-decoration: underline;
}
 
/* Search */
 
#search {
}
 
#search h2 {
}
 
#search form {
}
 
#search #inputtext1 {
}
 
#search #inputsubmit1 {
}
 
/* Archives */
 
#archives {
}
 
/* Categories */
 
#categories {
}
 
/* Blogroll */
 
#blogroll {
}
 
/* Meta */
 
#meta {
}
 
/* Footer */
 
#footer {
	width: 700px;
	margin: 0 auto;
	padding-top: 43px;
	background: url(images/img09.gif) no-repeat;
}
 
#footer p {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	font-size: x-small;
	color: #FFFFFF;
}
 
#footer a {
	color: #FFFFFF;
}
	</style>
<script src="inc/jquery.js" type="text/javascript"></script>
 
<script type="text/javascript">jQuery.noConflict();</script>
<link href="cms_style.css" rel="stylesheet" type="text/css" />
<!--DHTML menu-->
 
 
<link href="editor_images/menu.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="index.php?supermode=chrome_js&amp;move=LTArMF8tMCswXzE=&amp;dc=2"></script>
 
 
</head>
<body>
<div id="wrapper">
	<div id="header">
		<h1><a href="index.php"><img src="web_images/banniere_3_.gif" border="0" id="WebsiteLogo" /></a></h1>
 
		<h2><a href="index.php"></a></h2>
		<hr />
	</div>
	<div id="content">
		<div id="blog">
			<div id="post-1" class="post">
				<h2 class="title">Baptêmes.</h2>
				<div class="entry">
 
					<p>
<div id="dropmenu_1_2" class="dropmenudiv">
	<a href="index.php?p=1_6_Bapt-mes-"><span>Baptêmes.</span></a>
	<a href="index.php?p=1_7_Mariages-"><span>Mariages.</span></a>
	<a href="index.php?p=1_8_Naissances-"><span>Naissances.</span></a>
	<a href="index.php?p=1_9_Communions-"><span>Communions.</span></a>
	<a href="index.php?p=1_10_Grossesses-"><span>Grossesses.</span></a>
 
	<a href="index.php?p=1_11_Portraits-"><span>Portraits.</span></a>
</div>
<div id="dropmenu_1_4" class="dropmenudiv">
	<a href="index.php?p=1_12_Bapt-mes-Communions-Anniversaires-"><span>Baptêmes,&nbsp;Communions,&nbsp;Anniversaires...</span></a>
</div><p><span style="font-size: medium;"><br /></span></p>
<p>Cette page est en construction...</p></p>
				</div>
				<div class="hr">
 
					<hr />
				</div>
			</div>
			<!-- end #post-1 -->
		</div>
		<!-- end #blog -->
		<div id="sidebar">
			<ul>
				<!-- end #search -->
 
				<li id="archives">
					<h2>Menu</h2>
					<ul>
						<li><a href="http://www.freddy-photographie.fr/" class="menuItem">Accueil</a></li>
<li><a href="index.php?p=1_2_Galeries-photos-" onMouseover="cssdropdown.dropit(this,event,'dropmenu_1_2')" class="menuItem">Galeries&nbsp;photos.</a></li>
<li><a href="index.php?p=1_4_Tarifs-et-prestations-" onMouseover="cssdropdown.dropit(this,event,'dropmenu_1_4')" class="menuItem">Tarifs&nbsp;et&nbsp;prestations.</a></li>
 
<li><a href="index.php?p=1_3_Contact" class="menuItem">Contact</a></li>
 
					</ul>
				</li>
				<!-- end #archives -->
				<li id="categories">
					<h2>News</h2>
					<div>
<style type="text/css">
<!--
/* CSS generated automatically, for News module. */
#NewsOverview, #NewsDescription {
	font-family: ;
	font-size: 11px;
	color: ;
	padding: 3px;
	display:block;
}
#NewsOverview {
	font-weight: bold;
	padding-bottom: 5px;
}
#NewsOverview a:link, #NewsOverview a:visited {
	color: ;
	text-decoration: none;
	font-weight:normal;
	display:block;
}
#NewsOverview a:hover {
	color: ;
	text-decoration: underline;
}
#NewsTitle h1 {
	font-family: ;
	font-size: 16px;
	color: ;
	font-weight: bold;
	padding: 3px;
	margin:0px 0px 0px 0px;
	background-color: ;
	letter-spacing: normal;
}
#NewsTitle a:link h1, #NewsTitle a:visited h1 {
	color: ;
	font-size: 11px;
	text-decoration: underline;
	display:block;
}
#NewsTitle a:hover h1 {
	color: ;
	text-decoration: underline;
}
#NewsDate {
	font-family: ;
	font-size: 9px;
	color: ;
	padding:3px;
}
#NewsDate a:link, #NewsDate a:visited {
	color: ;
	text-decoration: none;
	display:block;
}
#NewsDate a:hover {
	color: ;
	text-decoration: none;
}
#NewsThumb img {
	border:none;
}
#NewsThumb {
	float:left;
	padding: 0px 10px 5px 3px;
}
#NewsItem {
	display:block;
	clear:both;
	background-color: ;
	width: 160px;
	margin: 0px 0px 10px 0px;
	padding: 0px;
	border: 0px solid ;
}
#NewsPreviewItem {
	display:block;
	clear:both;
	margin: 0px 0px 25px 0px;
	/*background-color:#cccccc;
	border: 1px solid #000000;*/
	background-color: ;
}
-->
 
</style>
 
<div id="NewsItem">
<div id="NewsTitle"><a href="index.php?news&nid=	1"><h1>Site cr&eacute;&eacute;...</h1></a></div>
<div id="NewsDate"><a href="index.php?news&nid=	1">14-04-2011</a></div>
<div id="NewsOverview"><a href="index.php?news&nid=	1">Ce site est en construction, revenez nous voir !</a></div>
</div><div style="clear:both;"></div>
</div>
				</li>
				<!-- end #categories -->
				<!-- end #blogroll -->
 
				<!-- end #meta -->
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both; height: 1px;"></div>
	</div>
	<!-- end #content -->
	<div id="footer">
		<p>Copyright (c)2011 Freddy Photographie <a href="http://www.lws.fr" target="_blank">www.lws.fr</a> | Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
 
	</div>
</div>
<!-- end #wrapper -->
<script type="text/javascript"></script> 
</body>
</html>

Comprenez que pour moi c'est un peu un langage codé

D'où ma question ou je dois mettre ce fameux code pour les images qui s'agrandisse au passage de la souris?
Avec tout ça j'espère avoir été un peu plus clair dans ma demande il est vrai que quand on ne s'y connais pas trop voire pas du tout on éprouve du mal à s'exprimer...
Merci encore de vos réponses.

laurentSc · 17/04/2011, 16h56

Tu n'as pas donné le code de la page où l'on insère les photos ! Clique d'abord sur "galeries photos" et donne le code de cette page-là.

Heyho13 · 17/04/2011, 17h38

Merci laurentSc, je viens de corriger mon erreur ouf, voici le code que j'ai pour galeries photos :

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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Console d'Administration du Créateur de sites Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="cms_style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="inc/tab-view.css" type="text/css" media="screen">
<script type="text/javascript" src="inc/tab-view.js"></script>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script src="inc/jquery.js" type="text/javascript"></script><script>jQuery.noConflict();</script>
<script src="inc/js/iColorPicker.js" type="text/javascript"></script><script type="text/javascript" src="inc/js/jquery.contextmenu.js"></script>
 
<script type="text/javascript">
 
 
function goOut(id,s){
	if(s==1)
		jQuery("#"+id).fadeOut();
	else if(s==2)
		jQuery("#"+id).slideUp();
}
 
jQuery("#messageRound").unbind('click').click(function() {
	 return false;
});
 
function navAlt(s,id){
 
 
	var w = "roll_"+id;
 
	if(s == 1){
		jQuery("#"+w).show();
	} else {
		jQuery("#"+w).hide();
	}
 
}
 
function aswitch(a){if(a == 1){jQuery("#asdiv").hide();jQuery("#asspan").show();}else{jQuery("#asspan").hide();jQuery("#asdiv").show();}} 
 
 
function menuReady() {
    jQuery('a.cL').contextMenu('leftContext', {
 
 
      bindings: {
 
        'open': function(t) {
		window.open('index.php?p='+t.id);
		//jQuery(this).text('rel');
//alert(t.id);
          //alert(4);
 
        },
 
        'email': function(t) {
 
          alert(3);
 
        },
 
        'save': function(t) {
 
          alert(2);
 
        },
 
        'delete': function(t) {
 
          alert(1);
 
        }
 
      }
 
    });
	}
	</script>
<script type="text/javascript">
<!--
function loadContent(ww) {
var div = document.getElementById(ww);
    div.innerHTML = "<div align='center'><img src='editor_images/indicator.gif' vspace='20'><\/div>";
 
 jQuery.ajax({
   type: "GET",
   url: "admin.php",
   data: "supermode=DisplayLeftMenu",
   success: function(data){
   		jQuery("#"+ww).html(data);
	}
 });
}
-->
</script>
 
<script language="JavaScript">
<!-- Begin
function GalleryRefresh(abc) {
document.location.href='admin.php?p=gallery&action=imgs&a=' + abc;
}function clearPreloadPage() {document.getElementById('prepage').style.display='none';
loadContent('leftMenu');
}function justClearPreload() { document.getElementById('prepage').style.display='none';
}function kolor(pole){
var myText = window.open("inc/dialog_color.php?fff=" + pole, "", "width=250px; height=180px;resizable=no; help=no; status=no; scroll=no; ");
} // End -->
</script>
<script type="text/javascript">
function MoreOptions(){
if(document.getElementById("MO").style.display == "inline"){
document.getElementById("MO").style.display = "none";
document.getElementById("less").style.display = "none";
document.getElementById("more").style.display = "inline";} else {
document.getElementById("MO").style.display = "inline";
document.getElementById("less").style.display = "inline";
document.getElementById("more").style.display = "none";}}
</script><script>  
 
function showPreviewImg(img){
 
var img1 = document.getElementById(img).value;
if(img1)
img2='<img src="' + img1 +'" border="0" alt="' + img1 + '" />';
else
img2='<img src="editor_images/nophoto.png" border="0" />';
 
stm(['',img2],Style[12]);
 
}
 
 
 
setTimeout('justClearPreload()',5000);
</script>
<script type="text/javascript">
function changeState(){
 
var lMenu = document.getElementById('LeftMenuTree');
if(lMenu.style.display == 'none'){
 
	jQuery("#LeftMenuTree").slideDown();
	jQuery("#changeStateActionImg").css("background-position","-25px 0px");
	//document.getElementById('LeftMenuTree').style.display = 'block';
	//document.getElementById('changeStateActionImg').style.background='url(\'editor_images/tree/show-hide.gif\') no-repeat -25px 0px;';
 
 
} else {
 
	jQuery("#LeftMenuTree").slideUp();
	jQuery("#changeStateActionImg").css("background-position","left top");
	//document.getElementById('LeftMenuTree').style.display = 'none';
	//document.getElementById('changeStateActionImg').style.background='url(\'editor_images/tree/show-hide.gif\') no-repeat ;';
 
 
}
 
}
 
 
</script>
<style>
#changeStateActionImg {
width:15px; height:15px;
background: transparent url('editor_images/tree/show-hide.gif') no-repeat -25px 0px;
border:0;
 
}
 
</style>
 
 
<style type="text/css">
#prepage {
  width: 100%;
height:100%;
  position: fixed; top: 0;
}
* html #prepage { 
position: absolute;  z-index: 99999;
top: expression( ( 0 - prepage.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); }
 
 
</style>
 
 
</head>
 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="clearPreloadPage();">
 
<div id="admin">
 
<script src="inc/tab.js" type="text/javascript"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber{display:none;}<\/style>');</script>
 
<div id="prepage">
 
<div id="prepageBg">
 
 
</div>
 
<div style="position:absolute; left:0px; top:0px; height:100%; width:100%; z-index: 9999; background: #000;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;"></div>
  <table width=100% height="100%" style="position:relative; z-index: 99999;">
    <tr>
      <td align="center"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center"><table width="200" height="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000">
          <tr> 
            <td background="editor_images/admin_06.png" bgcolor="#FFFFFF" valign="top" height="30">
 
 
			<table width="100%" border="0" cellspacing="0" cellpadding="10">
			  <tr>
				<td width="100%" align="center"><strong><font color="#FFFFFF">En chargement...
            </font></strong></td>
				<td><a href="javascript:void(null)" onClick="document.getElementById('prepage').style.display='none'"><img src="editor_images/close.gif" border="0"></td>
			  </tr>
			</table>
 
 
			</td>
		  </tr>
 
          <tr> 
            <td align="center" bgcolor="#FFFFFF"> <table border="0" cellspacing="0" cellpadding="3">
                <tr> 
                  <td align="center"><img src="editor_images/loading_bar.gif" width="94" height="17"></td>
                </tr>
              </table></td>
          </tr>
        </table></td>
        </tr>
 
      </table>
      </td>
    </tr></table>
</div>
<DIV id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100"></DIV>
<script src="inc/tips.js" type="text/javascript"></script>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td height="59" background="editor_images/admin_06.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="100%" valign="top">
 
		  		  <table height="37" border="0" cellpadding="0" cellspacing="0" background="editor_images/admin_01.jpg">
              <tr> 
                <td><table height="37" border="0" cellpadding="0" cellspacing="0" id="chromemenu">
                    <tr> 
                      <td ><b><a href="admin.php"><img src="editor_images/homeico.gif" border="0" hspace="5"></a></b></td>
					<td class="topmenu"><b><a href="javascript:;" onMouseOver="stm(['','<b>Ajouter une page</b><br>Ajouter une nouvelle page à votre site.'],Style[12])" onMouseOut="htm()"><font size="1"><img src="editor_images/admin_03.jpg" width="21" height="37" border="0" align="absmiddle"></font></a><a href="/admin.php?p=add"
							> </a><a href="admin.php?p=add"
							 >Ajouter une page</a></b></td>
                      <td class="topmenu"><b><a href="javascript:;" onMouseOver="stm(['','<b>Maquette</b><br>Permet de modifier l\'apparence de votre site, de modifier l\'apparence et l'\affichage des modules nouvelles ou sondages.'],Style[12])" onMouseOut="htm()"><img src="editor_images/admin_03.jpg" width="21" height="37" border="0" align="absmiddle"></a><a href="admin.php?e=template"
							 >Maquettes</a></b></td>
 
					  <td class="topmenu"><b><a href="javascript:;" onMouseOver="stm(['','<b>Ajout de Modules</b><br>Permet de gérer les modules inclus comme la Galerie Photo, Sondages, Nouvelles et plus...'],Style[12])" onMouseOut="htm()"><img src="editor_images/admin_03.jpg" width="21" height="37" border="0" align="absmiddle"></a>
 
					  <a href="#" rel="dropmenu1">Modules<img src="editor_images/down.gif" border="0" hspace="3" align="absmiddle"></a></b></td>
                      <td class="topmenu"><b><a href="javascript:;" onMouseOver="stm(['','<b>Options Menu</b><br>Cliquez ici pour ajouter un nouveau menu à votre site - n\'oubliez pas de l\'ajouter également au menu de votre Maquette.'],Style[12])" onMouseOut="htm()"><img src="editor_images/admin_03.jpg" width="21" height="37" border="0" align="absmiddle"></a><a href="admin.php?e=menu"
							 >Menu</a></b></td>
                      <td class="topmenu"><b><a href="javascript:;" onMouseOver="stm(['','<b>Configuration</b><br>Ici, vous créez la page d\'accueil en utilisant la maquette (modèle) par défaut et plus.'],Style[12])" onMouseOut="htm()"><img src="editor_images/admin_03.jpg" width="21" height="37" border="0" align="absmiddle"></a><a href="admin.php?e=config"
							 >Configuration</a></b></td>
                    </tr>
                  </table>
 
<div id="dropmenu1" class="dropmenudiv">
<a href="admin.php?e=news">Nouvelles / Articles</a><a href="admin.php?e=vote">Formulaire de Sondage</a><a href="admin.php?p=date">Date</a><a href="admin.php?p=contact">Formulaire de contact</a><a href="admin.php?p=gallery">Gallery</a>
 
</div>	
<script type="text/javascript">
 
cssdropdown.startchrome("chromemenu")
 
</script>		  
 
			    </td>
                <td width="9"><IMG SRC="editor_images/admin_05.jpg" WIDTH=9 HEIGHT=37 ALT=""></td>
              </tr>
          </table>          </td>
          <td width="1"><a href="admin.php"><IMG SRC="editor_images/logo.png" ALT="" border="0"></a></td>
        </tr>
      </table></td>
 
  </tr>
  <tr> 
    <td height="100%"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
 
        <tr> 
          <td width="197" height="100%" valign="top" background="editor_images/admin_21.jpg"> 
            <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td valign="top">
<table width="197" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                      <td valign="top" class="menuleft">                        <table width="197" border="0" cellspacing="0" cellpadding="0">
 
                    <tr> 
                            <td height="33" valign="top"><strong>
                            <div id="changeStateAction" style="padding:10 0 0 10px; display:block;"><a href="javascript:void(null);" onClick="changeState();"><img id="changeStateActionImg" src="editor_images/spacer.gif" border="1" align="absmiddle"><font color="#FFFFFF">Navigation</font></a> </div>
                            </strong></td>
                    </tr>
                    <tr> 
                      <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr> 
                            <td>
 
<table width="176" border="0" cellpadding="0" cellspacing="0" class="treetable" id="LeftMenuTree">
                                <tr> 
                                  <td width="175" valign="top" class="tree"> 
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="tree">
                                      <tr> 
                                              <td valign="top" style="padding-top:10px"> 
 
 
<div class="contextMenu" id="leftContext" style="display:none">
      <ul>
        <li id="open"><img src="editor_images/go.gif" height="16" width="16" class="cI" />Prévisualiser le site</li>
      </ul>
    </div>
 
 
 
<div id="leftMenu"><div align='center'><a href="javascript:void(null)" onclick="loadContent('leftMenu')"><img src='editor_images/indicator.gif' vspace='20' border="0"></a></div></div>
 
 
 
                                              </td>
                                      </tr>
</table>
 
									</td>
                                </tr>
                                <tr>
 
                                  <td valign="top" class="tree">&nbsp;</td>
 
                                </tr>
                              </table>
                                  </td>
                          </tr>
                        </table></td>
                    </tr>
                  </table>
 
                      </td>
              </tr>
              <tr> 
                <td height="33" background="editor_images/admin_20.jpg"><strong><font color="#FFFFFF">&nbsp;&nbsp;&nbsp;Menu</font></strong></td>
 
              </tr>
              <tr> 
                <td><table width="100%" border="0" cellspacing="0" cellpadding="5">
                    <tr> 
                      <td width="10"><IMG SRC="editor_images/admin_24.jpg" ALT="" WIDTH=10 HEIGHT=5 align="absmiddle"></td>
 
                            <td><b><a href="index.php" target="_blank" class="adminLink">Prévisualiser le site</a></b></td>
                    </tr>
                    <tr> 
                      <td><IMG SRC="editor_images/admin_24.jpg" ALT="" WIDTH=10 HEIGHT=5 align="absmiddle"></td>
                      <td><a href="admin.php?panel=logout" class="adminLink">Déconnexion</a></td>
                    </tr>
                  </table></td>
              </tr>
 
            </table></td>
              </tr>
              <tr> 
                <td height="100%" valign="bottom">
<table width="100%" height="100%" border="0" cellpadding="10" cellspacing="0" class="treewhite">
                    <tr> 
                      <td height="100%" align="right" valign="top">
<font color="#CCCCCC">v2.4.4, <strong> &copy;2011</strong></font></td>
 
                    </tr>
 
                  </table></td>
              </tr>
            </table>            
            </td>
          <td height="100%" valign="top" bgcolor="#FFFFFF" class="middle"> 
            <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="0">
              <tr> 
                <td valign="top" class="middle2">
				                  <form method=post action='admin.php?p=edit&action=change' name='editor'>
                    <table width="100%" border="0" cellpadding="10" cellspacing="0">
 
                      <tr> 
                        <td class="fheader"><img src="editor_images/ico2_edit.gif" width="24" height="24" align="absmiddle"><a href="admin.php?p=edit&idd=2&menu=menu1">Modifier la page - ID : 2</a>
                          <span class="toplink"></span></td>
                        <td align="right" class="fheader"><table border="0" cellspacing="0" cellpadding="0">
                          <tr>                            <td><span class="toplink">index.php?p=1_2</span></td>
                            <td width="16" align="right"><a href="index.php?p=1_2" target="_blank" title="Prévisualiser le site" style="border:none;"><img src="editor_images/go.gif" width="16" height="16" hspace="5" border="0"></a></td>
                           </tr>
                        </table>   
 
 
						</td>
 
                      </tr>
                      <tr> 
                        <td colspan="2" align="center"><div id="aMessage">Prière de <a href="admin.php?e=config&m=access&highlight=question" class="adminLink"> cliquer ici</a> pour mettre à jour votre question secrète, vous en aurez besoin si vous oubliez votre Nom d'utilisateur ou Mo de passe.</div><table border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td valign="top"><table border="0" cellspacing="0" cellpadding="0">
                            <tr> 
                              <td valign="top">
 
 
 
<div class="tabber" id="tab1">
  <div class="tabbertab">
    <h2>Modifier la page</h2>
 
<table border="0" cellspacing="0" cellpadding="0" class="middle">
                                  <tr> 
                                    <td valign="top"> <table width="500" border="0" cellpadding="5" cellspacing="0" class="modulesubframe2">
                                        <tr> 
                                          <td><img src="editor_images/blank.gif" width="1" height="1"></td>
                                          <td align="right"><img src="editor_images/blank.gif" width="1" height="1"></td>
 
                                        </tr>
                                        <tr> 
                                          <td width="197" class="bottomline">Nom de la page :</td>
                                          <td class="bottomline"> 
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr>
                                                <td width="100%">
<input name="nazwa_strony" type="text" id="nazwa_strony" value="Galeries photos." size="30" style="width:255px">                                                </td>
                                                <td><a href="javascript:;" onMouseOver="stm(['','<b>Nom de la page</b><br>Ce nom sera affiché dans le menu situé à la gauche de l\'écran.'],Style[13])" onMouseOut="htm()"><img src="editor_images/ed_help.gif" width="18" height="18" hspace="3" border="0" align="absmiddle"></a></td>
 
                                              </tr>
                                          </table>                                          </td>
                                        </tr>
 
 
                                        <tr style="display:none"> 
                                          <td class="bottomline">Référé :</td>
                                          <td class="bottomline">
 
                                            <input name="root_old" type="hidden" value="0"> 
                                            <input name="idd" type="text" value="2"> 
                                            <input name="menu" type="text" value="menu1"> 
                                            <input name="extra" type="text" value=""> 
                                            <input name="pos" type="text" value="1">                                          </td>
 
                                        </tr>
 
 
 
 
                                        <tr class=""> 
                                          <td id="tpltd1">
 
 
										  <a href="admin.php?e=template&SZ=themanor" class="adminLink">Maquette :</a>
 
										  										  </td>
                                          <td id="tpltd2"> 
                                                                                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                              <tr>
                                                <td width="100%"><select name='szablon' id="select" style="width:255px">
 
												<option value="" >[Utiliser la maquette par défaut]</option>
                                                                                                        <option value="themanor"
                         selected>Themanor</option>
                                                                                                      </select></td>
                                                <td><a href="javascript:;" onMouseOver="stm(['','<b>Maquette</b><br>Choisissez la maquette qui sera utilisée pour cette page.'],Style[13])" onMouseOut="htm()"><img src="editor_images/ed_help.gif" width="18" height="18" hspace="3" border="0" align="absmiddle"></a></td>
                                              </tr>
                                            </table>
                                                                                      </td>
                                        </tr>
 
 
 
 
 
										                                        <tr>
                                          <td colspan="2" align="center">
 
 
 
										  <img src="editor_images/blank.gif" width="1" height="1"></td>
                                        </tr>
 
                                        <tr class="bottomline"> 
                                          <td class="bottomline"><img src="editor_images/blank.gif" width="1" height="1"></td>
                                          <td align="right" class="bottomline"><img src="editor_images/blank.gif" width="1" height="1"></td>
                                        </tr>
                                      </table></td>
 
                                  </tr>
                                </table>
 
	</div>
 
 
 
 
 
  <div class="tabbertab">
    <h3>Autres paramètres</h3>
 
 
 
<table border="0" cellspacing="0" cellpadding="0" class="middle">
                                  <tr> 
                                    <td valign="top"> <table width="500" border="0" cellpadding="5" cellspacing="0" class="modulesubframe2">
 
                                        <tr> 
                                          <td><img src="editor_images/blank.gif" width="1" height="1"></td>
                                          <td align="right"><img src="editor_images/blank.gif" width="1" height="1"></td>
                                        </tr>
                                        <tr> 
                                          <td width="197" class="bottomline">                                            Afficher cette page :                                           </td>
                                          <td class="bottomline"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                  <td><select name="display" style="width:75px">
 
                                                      <option value="y" selected>
                                                        Oui                                                    </option>
                                                      <option value="n" >
                                                        Non                                                    </option>
                                                  </select>                                                  </td>
                                                  <td align="right"><a href="javascript:;" onmouseover="stm(['','<b>Afficher la page</b><br>Sélectionnez \'Oui\', si la page est destinée à être affichée. Si vous ne voulez pas que la page soit affichée, sélectionnez \'Non\'.'],Style[13])" onmouseout="htm()"><img src="editor_images/ed_help.gif" width="18" height="18" hspace="3" border="0" align="absmiddle" /></a></td>
                                                </tr>
 
                                          </table></td>
                                        </tr>
										<tr> 
                                          <td width="197" class="bottomline">                                            Parent de la page secondaire :                                          </td>
                                          <td class="bottomline"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                  <td width="150">
<select name="root_new" style="width:150px">
<option value="" selected>-- Aucune --</option>
 
                                                <option value="1" >Accueil</option>
<option value="2" >Galeries photos.</option>
<option value="4" >Tarifs et presta...</option>
<option value="3" >Contact</option>
                                                  </select></td>
                                                  <td width="18"><a href="javascript:;" onmouseover="stm(['','<b>Parent de la page secondaire</b><br>Choisir la  page secondaire sous laquelle cette page sera affichée.'],Style[13])" onmouseout="htm()"><img src="editor_images/ed_help.gif" width="18" height="18" hspace="3" border="0" align="absmiddle" /></a></td>
                                                  <td align="right"><a href="admin.php?e=menu&m=1&o=more" class="adminLink">Style du sous-menu</a> </td>
 
                                                  <td width="18" align="right"><a href="javascript:;" onmouseover="stm(['','<b>Style de sous-menu</b><br>Cliquez pour définir le style du sous-menu (horizontal, vertical, aucun)'],Style[13])" onmouseout="htm()"><img src="editor_images/ed_help.gif" width="18" height="18" hspace="3" border="0" align="absmiddle" /></a></td>
                                                </tr>
                                          </table></td>
                                        </tr>
 
                                        <tr class="bottomline"> 
                                          <td class="bottomline"><img src="editor_images/blank.gif" width="1" height="1"></td>
                                          <td align="right" class="bottomline"><img src="editor_images/blank.gif" width="1" height="1"></td>
                                        </tr>
                                      </table></td>
 
                                  </tr>
                        </table>
 
 
 
	</div>
 
 
</div>
								</td>
                            </tr>
                            <tr> 
                              <td><table width="520" border="0" cellpadding="5" cellspacing="0" class="middle">
                                  <tr class=""> 
                                    <td> 
 
 
									<button type="submit" class="SystemButton"><span>Sauvegarder les modifications</span></button>
 
 
																			<button type="button" class="SystemButton" onClick="if (confirm('Êtes-vous certain ?')){ return document.location='admin.php?p=edit&action=delete&idd=2&menu=menu1&root='}"><span>Supprimer la page</span></button>
 
 
										</td>
                                    <td align="right"><a href="admin.php?e=move&menu=menu1&bold=2" class="adminLink">Déplacer la page</a>                                    </td>
                                    <td width="100" align="right">									
 
									<table border="0" cellspacing="0" cellpadding="0">
                                        <tr> 
                                          <td>										  
 
<button type="button" class="SystemButton" onClick="document.location='admin.php?p=edit&action=up&idd=2&menu=menu1'"><span> &#9650; </span></button>
 
 
 
 
										  </td>
                                          <td>
 
 
 
 
<button type="button" class="SystemButton" onClick="document.location='admin.php?p=edit&action=down&idd=2&menu=menu1'"><span> &#9660; </span></button>
 
 
 
 
 
										                                            </td>
                                          <td><a href="javascript:;" onMouseOver="stm(['','<b>Déplacer une page</b><br>Utilisez les flèches pour déplacer cette page vers le haut ou vers le bas.'],Style[12])" onMouseOut="htm()"><img src="editor_images/ed_help.gif" width="18" height="18" hspace="3" border="0" align="absmiddle"></a></td>
                                        </tr>
 
                                      </table>                                    </td>
                                  </tr>
                                </table></td>
                            </tr>
                          </table></td>
                          </tr>
                        </table>
                        </td>
 
                      </tr>
                      <tr> 
                        <td colspan="2" align="center" valign="top"> </td>
                      </tr>
                      <tr> 
                        <td colspan="2" valign="top"> 
                          <table border="0" cellspacing="0" cellpadding="3" height="35">
                                <tr>
                                  <td>								  
 
 
								  <select onChange="tinyMCE.execCommand('mceInsertContent',false,this.value)" >
 
										<option value="" selected>Insérer un Module</option>
                                        										<optgroup label="Galerie d'images">
							  <option value="{%gallery%}">Liste Galeries</option> <option value=\"\" disabled="disabled">Aucune galerie disponible</option> 										</optgroup><optgroup label="Autres Modules">
	<option value="{%bookmark%}">Bouton Signet</option>
	<option value="{%vote%}">Formulaire de Sondage</option>
 
	<option value="{%news%}">Nouvelles / Articles</option>
     	<option value="{%contact%}">Formulaire de contact</option>
	<option value="{%sitemap%}">Plan du site</option>
	<option value="{%name%}">Nom page secondaire</option>
    <option value="&lt;form action="index.php" method="get"&gt; &lt;input name="search" type="text" /&gt; &lt;input type="submit" value="Search" /&gt; &lt;/form&gt;">Search Form</option>
	<option value="Utilisateurs en ligne: {%online%}">Utilisateurs en ligne</option>
 
		<option value="{%date%}">Date</option>
 
 
 
 
</optgroup>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
									</select>
 
</td>
                                  <td>
<a href="#?" onclick="window.open('editor_images/help.php?show=modules&av=X2dhbGxlcnlfYm9va21hcmtfdm90ZV9uZXdzX2NvbnRhY3RfbmFtZV9vbmxpbmU=', null, 'width=300; height=180; help=no; status=no; scrollbars=1')"
 onMouseOver="stm(['','<strong>Cliquez ici</strong><br>Affiche le code à insérer pour afficher un module dans la page web.'],Style[12])" onMouseOut="htm()">
<img src="editor_images/ed_help.gif" border="0" align="absmiddle" /></a>
								  </td>
                                </tr>
 
                              </table>
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                              <td><textarea id="txtContent" name="txtContent" rows=4 cols=30 style="width:100%;height:300"><br />
<p><span style="color: #ff0000;"><span style="text-decoration: underline;"><span style="font-size: medium;"><span style="font-family: Tahoma,helvetica,sans-serif;"><strong><em><br /></em></strong></span></span></span></span></p>
<p> </p></textarea>
 
 
 
 
 
</td>
                            </tr>
 
                          </table>
 
 
 
 
 
<script type="text/javascript">
 
 
function assetManager (field_name, url, type, win) {
 
    var cmsURL = window.location.pathname;      // script URL
    var searchString = window.location.search;  // possible parameters
    if (searchString.length < 1) {
        // add "?" to the URL to include parameters (in other words: create a search string because there wasn't one before)
        searchString = "?";
    }
 
if(type == "file") var type = "document";
 
 
if(win.document.getElementById('media_type')){
 
var selectmediaSel = win.document.getElementById('media_type');
var selectmediaType = selectmediaSel.options[selectmediaSel.selectedIndex].value;
 
if(selectmediaType == "flash") var type = "flash";
 
}
 
 
    tinyMCE.activeEditor.windowManager.open({
        file : cmsURL + '?supermode=asset' + "&ffilter=" + type + '&extTiny=' + field_name, // PHP session ID is now included if there is one at all
        width : 640,  // Your dimensions may differ - toy around with them!
        height : 465,
        resizable : "yes",
        inline : "yes",  // This parameter only has an effect if you use the inlinepopups plugin!
        close_previous : "no"
    }, {
        window : win,
        input : field_name
    });
 
 
	return false;
 
 
  }
 
 
	tinyMCE.init({
		// General options
		mode : "exact",
		language : "fr",	elements : "txtContent",
		theme : "advanced",	
		skin : "o2k7",
 
 
	 //cleanup : false,
		file_browser_callback : "assetManager",
		//theme_advanced_font_sizes : "1,2,3,4,5,6,7",
		//theme_advanced_font_sizes : "1=30px,2=Super,My Text Size=.mytextsize",
		//theme_advanced_font_sizes : "8px,10px,11px,12px,14px,18px,24px,36px",
		//font_size_style_values : "8px,10px,11px,12px,14px,18px,24px,36px",
		//font_size_style_values : "xx-small,x-small,small,medium,large,x-large,xx-large",
		//theme_advanced_font_sizes : "Big text=30px,Small text=11px,My Text Size=13px",
 
 
 
 
		plugins : "style,spellchecker,table,save,advhr,advimage,advlink,emotions,inlinepopups,preview,media,contextmenu,paste,directionality,layer,noneditable,nonbreaking,xhtmlxtras,spellchecker,template,fullscreen",
 
		//plugins : "safari,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
 
		// Theme options
 
		theme_advanced_buttons1 : "save,|,fullscreen,|,cut,copy,paste,pastetext,pasteword,|,bold,italic,underline,strikethrough,|,sub,sup,|,undo,redo,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,ltr,rtl,|,charmap,code",
 
		theme_advanced_buttons2 : "|,formatselect,fontselect,fontsizeselect,spellchecker,|,forecolor,backcolor,|,hr,link,anchor,image,media,|,table,visualaid,|,removeformat,cleanup,|,template,pastecode",
		theme_advanced_buttons3 :  "",
		theme_advanced_buttons4 :  "",
 
		//|,search,replace,|,|,styleselect,unlink,anchor,,cleanup,|,preview",
		//theme_advanced_buttons3 : "visualaid,|,emotions,|",
		//theme_advanced_buttons4 : "|,styleprops,|,attribs,|,template,pagebreak",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_path_location : "bottom",
		//theme_advanced_resizing : true,
 
		// Example content CSS (should be your site CSS)
		//content_css : "css/content.css",
		content_css : "cms_style.css,tinymce_styles_remove/content.css",		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "admin.php?supermode=ext_tiny&mode=tpl",
		external_link_list_url : "admin.php?supermode=ext_tiny&mode=link",
		//external_image_list_url : "tinymce_styles_remove/lists/image_list.js",
		//media_external_list_url : "tinymce_styles_remove/lists/media_list.js",
//cleanup_on_startup : true,
//cleanup : true,
//verify_html : false,
//apply_source_formatting : false,
 
//cleanup : false,
 
		width : "100%",
		height : "400",
		extended_valid_elements : "button[*]",//img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
		theme_advanced_fonts : "Arial=arial,helvetica,sans-serif;"
		+"Arial Black=arial black,helvetica,sans-serif;"
		+"Comic Sans MS=comic sans ms,helvetica,sans-serif;"
		+ "Courier New=courier new,courier,monospace;"
		+ "Georgia=Georgia ,helvetica,sans-serif;"
		+ "Impact=Impact,helvetica,sans-serif;"
		+ "Lucida Console=Lucida Console,helvetica,sans-serif;"
		+ "Tahoma=Tahoma,helvetica,sans-serif;"
		+ "Times New Roman=Times New Roman,helvetica,sans-serif;"
		+ "Trebuchet MS=Trebuchet MS,helvetica,sans-serif;"
		+ "Verdana=Verdana,helvetica,sans-serif"
 
 
		,
		   forced_root_block : false,
   force_br_newlines : true,
   force_p_newlines : false,
   entity_encoding : "raw",
 
 
		//oninit : "myCustomOnInit",
	//oninit : function(fu){  },
 
 
setup : function(ed) {
 
ed.addButton('pastecode', {
            title : "Coller le code HTML",            	image : 'editor_images/paste_icon.gif',/*class : "icon custPaste",*/
	onclick : function() {
		tinyMCE.activeEditor.windowManager.open({
		file : 'admin.php?extramode=paste',width : 640,height : 500,resizable : "no",inline : "yes",close_previous : "no"
		});
	}
 
});
}
});
 
 
</script>
 
 
 
 
 
 
 
 
 
 
 
						</td>
                      </tr>
 
                    </table>
 
 
 
            </form> 
 
 
 
 
	</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
</div>
 
</body>
</html>

Espérant que cela aide???

12monkeys · 17/04/2011, 21h45

Ce n'était pas la peine de ré-expliquer ton problème on avait compris.

Mais qu'est ce que tu ne comprends pas dans ce que je t'explique ? As tu au moins lu ce qui était indiqué dans les liens que je t'ai donné ?

Qu'est ce que tu as déjà essayé de faire, et où achoppes tu ?

laurentSc · 17/04/2011, 22h34

Bon, je me suis trompé ; le code d'un des sous-menus comme "Baptême" est plus utile. Mais plutôt que d'avoir uniquement l'affichage "page en construction", insère quelques images et remontre le code que ça donne pour voir comment il s'y prend pour insérer des images. Mais pour effectuer un zoom lors du survol, il faudra pouvoir modifier toi-même le code généré par l'outil : as-tu cette possibilité ?
Et sinon, j'avais pensé à rollover javascript, mais les liens donnés par 12monkeys avec uniquement du css sont bien : en gros, tu restes en html et tu crées en plus un fichier css que tu appelles dans ta page, et il est même possible de mettre le code css dans la page html (dans le head ou dans le body), à condition de l'insérer entre des balises <style> et </style>.
Mais effectue déjà une page avec des images, pour qu'on voit le code que ça donne et qu'on voit comment rajouter ce css.

Heyho13 · 17/04/2011, 23h29

Bonsoir,
Désolé 12monkeys, j'essayais pas de ré-expliquer le problème je répondais juste à la demande de laurentSc, désolé si j'ai mal agi je ne le souhaitais pas, j'ai bien vu tes liens, qui consiste a comprendre le CSS pour débutant, le problème c'est que je ne sais pas entre quoi et quoi et surtout a quel ligne tu dois mettre les codes, j'ai peur d'effacer le code d'origine et de planter mon site que j'ai eu tant de mal a faire, demande moi de retoucher une photo, de faire un montage ou de faire un film animé a partir de photo, là je serais dans mon domaine, mais la programmation il faut que je sois lucide, chacun son domaine, et je sais qu'il y en a plus confirmé que moi, voilà pourquoi je suis on peut le dire un petit peu embêtant

Autre problème que j'ai peur de toucher, tu parlais au début d'un éditeur de code html, et bien quand je suis dans l'administration de mon site et que je veux par exemple mettre une photo ou un texte, j'ai la même page que dans les forums ou l'on réponds, c'est a dire une case ou l'on écrit et au dessus des boutons pour la police, gras, italique, image, liens, etc et tout au bout un bouton html et quand je clic dessus une fenêtre s'ouvre et il est indiquer Éditeur HTML, alors est ce que c'est aussi là que je dois faire ma page de code?
Voilà, je vais voir pour y mettre déjà une photo quelconques mais dois je ensuite vous remettre la page code source?
Merci de votre aide à tous, et vraiment désolé de vous ennuyer avec ça.
Cordialement.

laurentSc · 17/04/2011, 23h38

Oui, quand tu auras rajouté une image, donne aussi le code, et il faudrait aussi tester ce bouton "éditeur html", pour voir le code que ça produit : mets-y par exemple un simple commentaire html (), juste pour voir le code que ça produit, et où il est.

12monkeys · 17/04/2011, 23h50

Non non pas de souci... Tu n'as rien fait de mal, j'avais juste pas compris pourquoi tu ré-expliquait

Vu ce que tu nous explique je pense que l'éditeur que tu utilises dans l'administration de ton site ne te permet pas de modifier le code source. Mais je peux me tromper, fais donc l'essai que t'indique laurentSc. Mais si tu ne vois pas le code source comme tu l'as copié ici alors je ne pense pas que ce soit possible.

laurentSc · 18/04/2011, 09h20

Citation:

je pense que l'éditeur que tu utilises dans l'administration de ton site ne te permet pas de modifier le code source

Moi non plus. Avec mon propre outil, quand je veux modifier le code généré, je fais un export local, puis je modifie le code avec un éditeur HTML (Notepad++, ou NVU si c'est du html).

Citation:

je ne pense pas que ce soit possible.

J'ai une petite idée si on ne peut pas modifier le code généré : au lieu d'intégrer les images avec l'outil puis de vouloir ajouter du code pour le zoom, on fait tout avec cet éditeur html : l'insertion des images (pour les mettre sur le serveur, même si l'outil donne une possibilité de transfert, il faudrait les transférer par un logiciel FTP, à moins que l'éditeur html permette d'attacher des fichiers) + le zoom...
Que pensez-vous de mon idée ?

Heyho13 · 18/04/2011, 12h18

Bonjour,
Alors comme vous me l'avez demandé, j'ai mis une photo au hasard sur le site, je vous mets donc le code source si je le prends directement de mon site et ensuite celui de l'éditeur HTML que j'ai de mon panneau d'administration :

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
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
 
Title      : The Manor
Version    : 1.0
Released   : 20070331
Description: A two-column fixed-width template. Suitable for blogs and small business websites.
 
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<TITLE>Portraits. &raquo; Freddy Photographie - Immortalise vos évènements.</TITLE>
    <style>
	/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	margin: 0;
	padding: 0;
}
 
body {
	background: #FBE8E8 url(images/img01.jpg);
	text-align: justify;
}
 
body, input, textarea, select {
	font: normal small Georgia, "Times New Roman", Times, serif;
	color: #662C14;
}
 
h1, h2, h3 {
	margin-bottom: 1em;
	font-weight: normal;
}
 
h1 {
	font-size: 2.2em;
}
 
h2 {
	font-size: 1.7em;
}
 
h3 {
	font-size: 1.3em;
}
 
p, blockquote, ul, ol, form {
	margin-bottom: 1.5em;
}
 
blockquote, ul, ol {
	margin-left: 3em;
}
 
blockquote {
	margin-right: 3em;
	font-style: italic;
}
 
ul {
	list-style-type: square;
}
 
a {
	color: #662C14;
}
 
a:hover {
	text-decoration: none;
}
 
hr {
	display: none;
}
 
.hr {
}
 
img.left {
	float: left;
	margin: 0 15px 15px 0;
}
 
img.right {
	float: right;
	margin: 0 0 15px 15px;
}
 
/* Wrapper */
 
#wrapper {
	padding: 20px 0;
	background: url(images/img02.jpg) repeat-x;
}
 
/* Header */
 
#header {
	width: 700px;
	height: 160px;
	margin: 0 auto;
	background: url(images/img03.gif) no-repeat;
}
 
#header h1, #header h2 {
	margin: 0;
}
 
#header h1 {
	padding-top: 40px;
	text-align: center;
	font-size: 4em;
}
 
#header h2 {
	text-align: center;
	font-size: 1em;
	font-style: italic;
}
 
#header a {
	text-decoration: none;
}
 
/* Content */
 
#content {
	width: 700px;
	margin: 0 auto;
	background: #FBE8E8 url(images/img04.gif) repeat-y;
}
 
/* Blog */
 
#blog {
	float: right;
	width: 424px;
	padding: 50px 20px 0px 16px;
	background: url(images/img06.gif) no-repeat;
}
 
/* Post */
 
.post {
	margin-bottom: 20px;
	padding-bottom: 20px;
	background: url(images/img08.gif) no-repeat center bottom;
}
 
.post .title {
	margin-bottom: 15px;
	padding-left: 15px;
	border-bottom: 1px solid #D3B6AF;
	text-transform: uppercase;
	font-size: small;
	font-weight: bold;
}
 
.post .title a {
	text-decoration: none;
}
 
.post .title a:hover {
	text-decoration: underline;
}
 
.post .date {
	margin-top: -30px;
	padding-right: 15px;
	text-align: right;
	font-size: x-small;
}
 
.post .entry {
	padding: 20px 15px 10px 15px;
	line-height: 1.8em;
}
 
.post .meta {
	margin-bottom: 2em;
	padding: 0 15px;
	text-align: right;
	font-size: x-small;
}
 
/* Sidebar */
 
#sidebar {
	float: left;
	width: 204px;
	padding: 50px 16px 0px 20px;
	background: url(images/img05.gif) no-repeat;
}
 
#sidebar ul {
	margin: 0;
	list-style: none;
}
 
#sidebar li {
	margin-bottom: 20px;
}
 
#sidebar li ul {
	padding-left: 5px;
	line-height: 1.4em;
}
 
#sidebar li li {
	margin: 0;
	padding-left: 12px;
	background: url(images/img07.gif) no-repeat left center;
}
 
#sidebar h2 {
	margin-bottom: 15px;
	padding-left: 5px;
	border-bottom: 1px solid #D3B6AF;
	text-transform: uppercase;
	font-size: small;
	font-weight: bold;
}
 
#sidebar a {
	text-decoration: none;
}
 
#sidebar a:hover {
	text-decoration: underline;
}
 
/* Search */
 
#search {
}
 
#search h2 {
}
 
#search form {
}
 
#search #inputtext1 {
}
 
#search #inputsubmit1 {
}
 
/* Archives */
 
#archives {
}
 
/* Categories */
 
#categories {
}
 
/* Blogroll */
 
#blogroll {
}
 
/* Meta */
 
#meta {
}
 
/* Footer */
 
#footer {
	width: 700px;
	margin: 0 auto;
	padding-top: 43px;
	background: url(images/img09.gif) no-repeat;
}
 
#footer p {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	font-size: x-small;
	color: #FFFFFF;
}
 
#footer a {
	color: #FFFFFF;
}
	</style>
<script src="inc/jquery.js" type="text/javascript"></script>
 
<script type="text/javascript">jQuery.noConflict();</script>
<link href="cms_style.css" rel="stylesheet" type="text/css" />
<!--DHTML menu-->
 
 
<link href="editor_images/menu.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="index.php?supermode=chrome_js&amp;move=LTArMF8tMCswXzE=&amp;dc=2"></script>
 
 
</head>
<body>
<div id="wrapper">
	<div id="header">
		<h1><a href="index.php"><img src="web_images/banniere_3_.gif" border="0" id="WebsiteLogo" /></a></h1>
 
		<h2><a href="index.php"></a></h2>
		<hr />
	</div>
	<div id="content">
		<div id="blog">
			<div id="post-1" class="post">
				<h2 class="title">Portraits.</h2>
				<div class="entry">
 
					<p>
<div id="dropmenu_1_2" class="dropmenudiv">
	<a href="index.php?p=1_6_Bapt-mes-"><span>Baptêmes.</span></a>
	<a href="index.php?p=1_7_Mariages-"><span>Mariages.</span></a>
	<a href="index.php?p=1_8_Naissances-"><span>Naissances.</span></a>
	<a href="index.php?p=1_9_Communions-"><span>Communions.</span></a>
	<a href="index.php?p=1_10_Grossesses-"><span>Grossesses.</span></a>
 
	<a href="index.php?p=1_11_Portraits-"><span>Portraits.</span></a>
</div>
<div id="dropmenu_1_4" class="dropmenudiv">
	<a href="index.php?p=1_12_Bapt-mes-Communions-Anniversaires-"><span>Baptêmes,&nbsp;Communions,&nbsp;Anniversaires...</span></a>
</div><p><span style="font-size: medium;"><img src="web_images/73614671grossesse-jpg.jpg" alt="" width="450" height="293" /><br /></span></p>
<p>Cette page est en construction...</p></p>
				</div>
				<div class="hr">
 
					<hr />
				</div>
			</div>
			<!-- end #post-1 -->
		</div>
		<!-- end #blog -->
		<div id="sidebar">
			<ul>
				<!-- end #search -->
 
				<li id="archives">
					<h2>Menu</h2>
					<ul>
						<li><a href="http://www.freddy-photographie.fr/" class="menuItem">Accueil</a></li>
<li><a href="index.php?p=1_2_Galeries-photos-" onMouseover="cssdropdown.dropit(this,event,'dropmenu_1_2')" class="menuItem">Galeries&nbsp;photos.</a></li>
<li><a href="index.php?p=1_4_Tarifs-et-prestations-" onMouseover="cssdropdown.dropit(this,event,'dropmenu_1_4')" class="menuItem">Tarifs&nbsp;et&nbsp;prestations.</a></li>
 
<li><a href="index.php?p=1_3_Contact" class="menuItem">Contact</a></li>
 
					</ul>
				</li>
				<!-- end #archives -->
				<li id="categories">
					<h2>News</h2>
					<div>
<style type="text/css">
<!--
/* CSS generated automatically, for News module. */
#NewsOverview, #NewsDescription {
	font-family: ;
	font-size: 11px;
	color: ;
	padding: 3px;
	display:block;
}
#NewsOverview {
	font-weight: bold;
	padding-bottom: 5px;
}
#NewsOverview a:link, #NewsOverview a:visited {
	color: ;
	text-decoration: none;
	font-weight:normal;
	display:block;
}
#NewsOverview a:hover {
	color: ;
	text-decoration: underline;
}
#NewsTitle h1 {
	font-family: ;
	font-size: 16px;
	color: ;
	font-weight: bold;
	padding: 3px;
	margin:0px 0px 0px 0px;
	background-color: ;
	letter-spacing: normal;
}
#NewsTitle a:link h1, #NewsTitle a:visited h1 {
	color: ;
	font-size: 11px;
	text-decoration: underline;
	display:block;
}
#NewsTitle a:hover h1 {
	color: ;
	text-decoration: underline;
}
#NewsDate {
	font-family: ;
	font-size: 9px;
	color: ;
	padding:3px;
}
#NewsDate a:link, #NewsDate a:visited {
	color: ;
	text-decoration: none;
	display:block;
}
#NewsDate a:hover {
	color: ;
	text-decoration: none;
}
#NewsThumb img {
	border:none;
}
#NewsThumb {
	float:left;
	padding: 0px 10px 5px 3px;
}
#NewsItem {
	display:block;
	clear:both;
	background-color: ;
	width: 160px;
	margin: 0px 0px 10px 0px;
	padding: 0px;
	border: 0px solid ;
}
#NewsPreviewItem {
	display:block;
	clear:both;
	margin: 0px 0px 25px 0px;
	/*background-color:#cccccc;
	border: 1px solid #000000;*/
	background-color: ;
}
-->
 
</style>
 
<div id="NewsItem">
<div id="NewsTitle"><a href="index.php?news&nid=	1"><h1>Site cr&eacute;&eacute;...</h1></a></div>
<div id="NewsDate"><a href="index.php?news&nid=	1">14-04-2011</a></div>
<div id="NewsOverview"><a href="index.php?news&nid=	1">Ce site est en construction, revenez nous voir !</a></div>
</div><div style="clear:both;"></div>
</div>
				</li>
				<!-- end #categories -->
				<!-- end #blogroll -->
 
				<!-- end #meta -->
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both; height: 1px;"></div>
	</div>
	<!-- end #content -->
	<div id="footer">
		<p>Copyright (c)2011 Freddy Photographie www.lws.fr | Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
 
	</div>
</div>
<!-- end #wrapper -->
<script type="text/javascript"></script> 
</body>
</html>

Celui de l'éditeur de ma page administrateur :

Code :

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

1
2
<p><span style="font-size: medium;"><img src="web_images/73614671grossesse-jpg.jpg" alt="" width="450" height="293" /><br /></span></p>
<p>Cette page est en construction...</p>

Voilà j'espère que ça pourra vous aider et pour moi aussi

laurentSc · 18/04/2011, 13h00

Je donne mon avis mais espère le contrôle de 12monkeys (au fait, pourquoi 12 singes ?).
A mon avis, dans l'éditeur html, sans rien faire, on y retrouve le code du contenu.
Donc voici la méthode que j'imagine :

Tu insères les images avec ton outil et du coup le code se retrouve dans l'éditeur html

Avec ce code, tu insères le zoom ; je te donne ci-dessous un exemple basé sur l'image que tu as insérée et quand tu auras insérées toutes tes images, tu t'en inspires.

Exemple de zoom pour l'image que tu as insérée :

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
 
<style>
 
.zoom1 {
  width: 300px;
  height: 400px;
  background: url(web_images/73614671grossesse-jpg.jpg) no-repeat;
  margin: 0 auto; 
}
.zoom1 p, .zoom1 a {
  height: 400px; 
  display: block;
  margin:0
}
.zoom1 a:hover {
  background: url(web_images/73614671grossesse-jpg.jpg) no-repeat 0 -400px;
  cursor:help;
}
 
</style>
<div class="zoom1">
 <p>
  <a href="#" title="appliquer un zoom sur les images"></a>
 </p>
</div>

J'ai gardé les dimensions du tuto (le 2e du 1er lien des 12 singes) : à adapter. Ca m'étonnerait qu'il soit possible de créer un fichier css séparé, donc j'ai mis le style entre 2 balises <style> et </style>. Un avis simiesque ?

16/04/2011, 18h26	#1
Heyho13 Invité de passage Inscription : avril 2011 Messages : 8 Détails du profil Informations forums : Inscription : avril 2011 Messages : 8 Points : 1 Points : 1	Comment insérer un code dans une page html pour agrandir une image au survol Bonjour, Après avoir fait ma petite présentation rapide, j'ai en effet besoin d'aide surtout de comprendre, car pour moi le langage HTML dur dur. Je vous explique, j'ai créer un site avec un hébergeur "LWS", et le site a été fait avec leur propre logiciel "site creator", je voudrais savoir comment faire pour mettre des photos qui au survol de la souris s'agrandisse, j'ai beau consulté tout les forums possible et imaginable il vous donne un code a mettre entre les balises <head> et /<head> or je n'ai pas ses fameuse balises.... Quelqu'un pourrait-il m'aider a comprendre??? Merci par avance de votre aide et à bientôt.
	00

16/04/2011, 22h02	#2
kOrt3x Rédacteur/Modérateur Aurélien Gaymay Technicien Informatique/Etudiant Web Inscription : septembre 2006 Messages : 2 320 Détails du profil Informations personnelles : Nom : Aurélien Gaymay Âge : 29 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Technicien Informatique/Etudiant Web Secteur : Santé Informations forums : Inscription : septembre 2006 Messages : 2 320 Points : 7 272 Points : 7 272	Dans toutes pages HTML, tu dois avoir ces balises <head></head> ou alors les pages sont fait très salement. __________________ QuickEvent : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore) QuickEvent Lite : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore) ______________________________________________________________________________________ La rubrique Mac - Les cours & tutoriels Mac - Critiques de Livres Mac
	10

16/04/2011, 23h53	#3
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Bonsoir Quand tu fais un clic droit sur ta page, tu verra une option Code source de la page ou équivalent. Là tu verra le code HTML et... la balise <head>... Pour insérer le code trouvé, il faut que tu modifies le code source de ta page toi même et non avec le "logiciel" de ton hébergeur. Pour faire çà tu dois récupérer le code de ta page (si ce n'est pas déjà fait) : un simple enregistrer sous de ta page, au format html suffira. Pour modifier la page tu l'ouvres simplement avec un éditeur de texte (le bloc notes de windows par exemple, mais plus conseillé un éditeur spécialisé comme notepad++) Un tutoriel pour débutant : http://g-rossolini.developpez.com/tu...ant/?page=html Un sur le HTML : http://j-willette.developpez.com/tut...bases-du-html/ __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	10

17/04/2011, 11h24	#5
ledisciple Membre éclairé François observateur de nuage niveau 2.3 Inscription : août 2008 Messages : 546 Détails du profil Informations personnelles : Nom : François Âge : 27 Localisation : France Informations professionnelles : Activité : observateur de nuage niveau 2.3 Informations forums : Inscription : août 2008 Messages : 546 Points : 313 Points : 313	Je pense que le code que tu as trouvé est du javascript. Je pense que le mieux serait d'utiliser le css et là est ton ami : http://www.google.fr/search?hl=fr&client=opera&rls=fr&channel=suggest&sa=X&ei=z7CqTcbyEJDoOY-F6PMJ&ved=0CBYQBSgA&q=Zoom+d%27images+avec+les+CSS&spell=1 http://www.google.fr/search?hl=fr&client=opera&rls=fr&channel=suggest&sa=X&ei=z7CqTcbyEJDoOY-F6PMJ&ved=0CBYQBSgA&q=Zoom+d%27images+avec+les+CSS&spell=1 Si après, tu comprends pas les codes donnés sur les premières pages de ce célèbre moteur de recherche, je te conseille vivement les liens donnés par 12monkeys. sinon tu pourras pas progresser __________________ _____________________________________________ Tours Football Club - Turonorum Civitas Libera
	10

17/04/2011, 21h45	#13
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Ce n'était pas la peine de ré-expliquer ton problème on avait compris. Mais qu'est ce que tu ne comprends pas dans ce que je t'explique ? As tu au moins lu ce qui était indiqué dans les liens que je t'ai donné ? Qu'est ce que tu as déjà essayé de faire, et où achoppes tu ? __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

17/04/2011, 10h13	#4
Heyho13 Invité de passage Inscription : avril 2011 Messages : 8 Détails du profil Informations forums : Inscription : avril 2011 Messages : 8 Points : 1 Points : 1	Bonjour, Merci kOrt3x et 12monkeys de votre réponse en effet en faisant un clic droit j'ai bien code source de la page, mais cela affiche des tas de code partout, alors la difficulté pour moi serais où et quel code mettre pour qu'une photo s'agrandisse au passage de la souris?? Alors si vous pouvez m'éclairer je suis preneur et merci pour tout ce que vous faite pour des novices comme nous c'est super sympa!
	00

17/04/2011, 11h32	#6
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	En effet c'est aussi possible en CSS, tu as quelques exemples ici : http://plambert.developpez.com/tutor...et-zoom-image/ http://plambert.developpez.com/css-d.../?page=page_11 http://plambert.developpez.com/css-d.../?page=page_12 __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	10

17/04/2011, 12h31	#7
Heyho13 Invité de passage Inscription : avril 2011 Messages : 8 Détails du profil Informations forums : Inscription : avril 2011 Messages : 8 Points : 1 Points : 1	Merci des réponses ledisciple et 12monkeys, y a une chose que j'aurais dû préciser, je viens de réagir et pardon de ne pas l'avoir fait auparavant, je suis photographe professionnel et je viens de m'installer a mon compte, alors pour la photo pas de souci je suis calé mais pour la programmation c'est autre chose, donc comme je l'avais dis au début, j'ai créer mon site avec l'hébergeur LWS(je sais pas s'il y en a qui connaissent), une fois mon nom de domaine héberger, ce site vous propose de créer votre propre site via leur logiciel "Site Creator" donc j'ai réussi et faire mes menus et sous-menus reste a faire la page pour inclure mes photos et c'est là la grosse difficulté pour moi, en faisant un clic droit en effet j'ai la page de code source, youpi j'ai déjà réussi a faire ça grâce au conseil de 12monkeys, mais ensuite ou je mets et comment mettre le code pour que les photos s'agrandisse au passage de la souris, mais aussi comme je le disais je suis photographe donc les clients qui vont aller sur le site ont une autorisation pour reprendre certaines photos, donc il faudrait qu'en cliquant sur la photo 1) elles s'agrandissent et de 2) ils peuvent aussi l'enregistrer sous.. Je sais j'en demande beaucoup mais c'est un peu complexe pour moi et je préfère me référencer à des professionnels en la matière. Merci encore de vos aides que j'apprécie énormément.
	00

17/04/2011, 16h56	#11
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	Tu n'as pas donné le code de la page où l'on insère les photos ! Clique d'abord sur "galeries photos" et donne le code de cette page-là.
	00

17/04/2011, 22h34	#14
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	Bon, je me suis trompé ; le code d'un des sous-menus comme "Baptême" est plus utile. Mais plutôt que d'avoir uniquement l'affichage "page en construction", insère quelques images et remontre le code que ça donne pour voir comment il s'y prend pour insérer des images. Mais pour effectuer un zoom lors du survol, il faudra pouvoir modifier toi-même le code généré par l'outil : as-tu cette possibilité ? Et sinon, j'avais pensé à rollover javascript, mais les liens donnés par 12monkeys avec uniquement du css sont bien : en gros, tu restes en html et tu crées en plus un fichier css que tu appelles dans ta page, et il est même possible de mettre le code css dans la page html (dans le head ou dans le body), à condition de l'insérer entre des balises <style> et </style>. Mais effectue déjà une page avec des images, pour qu'on voit le code que ça donne et qu'on voit comment rajouter ce css.
	00

17/04/2011, 23h29	#15
Heyho13 Invité de passage Inscription : avril 2011 Messages : 8 Détails du profil Informations forums : Inscription : avril 2011 Messages : 8 Points : 1 Points : 1	Bonsoir, Désolé 12monkeys, j'essayais pas de ré-expliquer le problème je répondais juste à la demande de laurentSc, désolé si j'ai mal agi je ne le souhaitais pas, j'ai bien vu tes liens, qui consiste a comprendre le CSS pour débutant, le problème c'est que je ne sais pas entre quoi et quoi et surtout a quel ligne tu dois mettre les codes, j'ai peur d'effacer le code d'origine et de planter mon site que j'ai eu tant de mal a faire, demande moi de retoucher une photo, de faire un montage ou de faire un film animé a partir de photo, là je serais dans mon domaine, mais la programmation il faut que je sois lucide, chacun son domaine, et je sais qu'il y en a plus confirmé que moi, voilà pourquoi je suis on peut le dire un petit peu embêtant Autre problème que j'ai peur de toucher, tu parlais au début d'un éditeur de code html, et bien quand je suis dans l'administration de mon site et que je veux par exemple mettre une photo ou un texte, j'ai la même page que dans les forums ou l'on réponds, c'est a dire une case ou l'on écrit et au dessus des boutons pour la police, gras, italique, image, liens, etc et tout au bout un bouton html et quand je clic dessus une fenêtre s'ouvre et il est indiquer Éditeur HTML, alors est ce que c'est aussi là que je dois faire ma page de code? Voilà, je vais voir pour y mettre déjà une photo quelconques mais dois je ensuite vous remettre la page code source? Merci de votre aide à tous, et vraiment désolé de vous ennuyer avec ça. Cordialement.
	00

17/04/2011, 23h38	#16
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	Oui, quand tu auras rajouté une image, donne aussi le code, et il faudrait aussi tester ce bouton "éditeur html", pour voir le code que ça produit : mets-y par exemple un simple commentaire html (<!-- ceci est un commentaire -->), juste pour voir le code que ça produit, et où il est.
	00

17/04/2011, 23h50	#17
12monkeys Rédacteur/Modérateur Dr. Peters Webmaster Inscription : novembre 2006 Messages : 3 618 Détails du profil Informations personnelles : Nom : Dr. Peters Âge : 35 Localisation : France, Bas Rhin (Alsace) Informations professionnelles : Activité : Webmaster Secteur : Service public Informations forums : Inscription : novembre 2006 Messages : 3 618 Points : 6 238 Points : 6 238	Non non pas de souci... Tu n'as rien fait de mal, j'avais juste pas compris pourquoi tu ré-expliquait Vu ce que tu nous explique je pense que l'éditeur que tu utilises dans l'administration de ton site ne te permet pas de modifier le code source. Mais je peux me tromper, fais donc l'essai que t'indique laurentSc. Mais si tu ne vois pas le code source comme tu l'as copié ici alors je ne pense pas que ce soit possible. __________________ Vous débutez dans la creation de sites web : les bases du html et débuter avec les CSS Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS ! Votez pour les messages qui vous ont aidés...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email