Centrer Préload & Image

Version imprimable

Bonjour à tous,

J'ai trouvé un script pour précharger et afficher
une image lourde.

Une petite image d'attente s'affiche pendant la
mise en cache de la grosse image, puis la petite
image est remplaçée par la grosse image.

Ce script me va tout a fait, ce que je voudrais,
c'est que l'image d'attente et la grosse image
soient affichées au milieu de la page (frame) 50%,50%.

La page d'appel :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <script type="text/javascript" src="preload.js"> </script> </head> <body> <!– avec redimensionnement –> <CENTER> <img src="attente.gif" onload="preload (this, '../images/maxi/3280.jpg', null, 414, 643)"/> </body></html>
Le fichier preload.js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 preload = function (o, img_src, w, h) { var img = new Image (); img.onload = function () { o.onload = null; if (w) o.width = w; if (h) o.height = h; o.src = img.src }; img.src = img_src; }
- attente.gif (petit gif animé 4 Ko)
- 3280.jpg (grosse image 2, Mo)

J'ai esseyé avec du CSS et/ou un DIV mais
sans résultat !

Je crois que c'est plus du ressort du JavaScript.
Un conseil serai le bienvenu

Bonne journée.

12/10/2009, 13h16
le_chomeur

en css tu peux parfaitement positionner un élément verticalemen/horizontalement :

http://css.developpez.com/faq/?page=...calement_block

jour

ceci devrait suffir pour centre l'image

Code:

1
2
3
4
5
6
 
var mage=document.getElementById('monimage')
 
mage.style.left=((document.documentElement.clientWidth-mage.offsetWidth)/2)+'px';
 
mage.style.top=(document.documentElement.clientHeight-mage.offsetHeight)/2+"px";

Merci pour vos réponses.

J'ai pris l'exemple du lien, il y a un début de bien, mais pas centré !

Voici le nouveau code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
 
<script type="text/javascript"
  src="preload.js">
</script>
 
<style type="text/css">
#parent {
	position : relative;
	width : 500px;
	height : 500px;
	border : 1px solid red;
}
 
#enfant {
	position:absolute;
	top: 50%; /* pour centrage vertical */
	left: 50%; /*pour centrage horizontal */
	width : 200px;
	height : 200px;
	margin-top: -100px; /* margin-top = - height/2 */
	margin-left: -100px; /* margin-left = - width/2 */
	border : 1px solid green;
}
</style>
 
</head>
<body>
<CENTER>
<div id="parent">
	<div id="enfant">
<img src="ajax-loader.gif" onload="preload (this, '../images/maxi/3280.jpg', null, 414, 643, 100)"/>
	</div>
</div>
 
</body>
</html>

Le résultat est visible sur : http://www.bonturf.com/tests/att-01.php

J'ai laissé les bordures aux DIV's pour voir leurs positionnement.

PS: Mes grosse images ont toujours la mème dimention.

met margin left en auto

Code:

1
2
3
4
5
6
7
8
9
10
#enfant {
	position:absolute;
	top: 15%; /* pour centrage vertical */
	left: 20%; /*pour centrage horizontal */
/*	width : 50px;*/
/*	height : 200px;*/
	margin-top: -100px; /* margin-top = - height/2 */
	margin-left:auto;
	border : 1px solid green;
}

Hélas !

Non, la grande image ne ce centre pas, mais s'affiche
avec comme point de départ le coin supérieur gauche
de la petite image !

Avec le code suivant, la grande image est centrée, mais
la petite est affichée au coin supérieur gauche de la grande !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #enfant { position:absolute; top: 35%; /* pour centrage vertical */ left: -11%; /*pour centrage horizontal */ /* width : 50px;*/ /* height : 200px;*/ margin-top: -100px; /* margin-top = - height/2 */ margin-left:auto; /*-100px; /* margin-left = - width/2 */ border : 1px solid green; } </style>
Pour info, testé en résolution 1024 X 768

J'aurais du poser ma question dans le forum CSS vu
que l'on ne touche pas au JavaScript !