Redimensioner une image en fonction de la hauteur utile de la fenêtre

**minogttao** · 02/12/2006, 18h00

Bonjour,

J'essaie de créer une fonction pour redimensionner une image en fonction de la hauteur utile de la fenêtre (c'est à dire la hauteur de la fenêtre moins les barres d'outils, status ....)

Je souhaite qu'au chargement de la page l'image soit redimensioner (A sa première apparition).

Ce code ne fonctionne pas sous IE et encore moins sous Firefox, pourquoi?

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
<html>
<head>
<script type="text/javascript">
function resizepict() {
		var size = document.getElementsByTagName("html")[0];
		if (size.offsetHeight+size.offsetTop < 718) {
		alert(size.offsetWidth+size.offsetLeft);
		alert(size.offsetHeight+size.offsetTop); // retoure 0 dans Firefox ??
		var height = size.offsetHeight+size.offsetTop;
		document.image.heigth = height;
		document.image.width = 718*height/875; // L'image originale est en 875x718
		}
	}
resizepict();
</script>
</head>
<body>
<img src="test.jpg" name="image" hspace="0" vspace="0">
</body>
</html>

**FremyCompany** · 02/12/2006, 19h05

Code JavaScript :

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

document.getElementById("ID").style.width="876px"

**minogttao** · 02/12/2006, 19h45

Je ne comprends pas vraiment, dois je remplacer ce code

Code :

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

var size = document.getElementsByTagName("html")[0];

par celui ci

Code :

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

var size = document.getElementById("1").style.width="875px";

et modifier cela

Code :

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

<img src="test.jpg" id="1" name="image" hspace="0" vspace="0">

Mon code du premier post fonctionne en parti car dans les alerts que j'ai mis pour voir l'éxécution du code la hauteur et la largeur utile sont affichées. Par contre dans firefox le calcul de la hauteur retourne toujours zéro.

Et de plus l'image n'est pas redimensionée sous IE et Firefox

**FremyCompany** · 02/12/2006, 20h41

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
<html>
<head>
</head>
<body>
<img style="position: absolute; top:0px; left:0px; width:100%" src="test.jpg" id="image" name="image" hspace="0" vspace="0">
<script type="text/javascript">
<!--
var theImage = document.getElementById("image");
function resizepict() {
   var size = document.getElementsByTagName("html")[0];
   if (size.offsetHeight+size.offsetTop < 718) {
      var H= size.offsetHeight+size.offsetTop;
      theImage.style.heigth = H+"px";
      theImage.style.width = (718*H/875)+"px"; 
   }
   // Centre l'image :
   var Top = parseInt((size.offsetHeight + size.offsetTop - theImage.offsetHeight)/2)
   var Left = parseInt((size.offsetWidth + size.offsetLeft - theImage.offsetWidth)/2)
   theImage.style.top=Top+"px";
   theImage.style.left=Left+"px";
}
resizepict();
document.title="Afficher l'image : " + theImage.src;
document.onresize=resizepict;

-->
</script>
</body>
</html>

**minogttao** · 04/12/2006, 23h09

Merci, je ne m'attendais pas à ce que tu me donnes le code complet et corrigé

.

Aprés reflexion je comprends ton code mais je ne vois toujours pas pourquoi on ne peut pas utiliser directement

Code :

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

document.image.heigth

alors que dans une autre fonction j'utilise

Code :

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

document.image.src

et cela fonctionne.

Par contre l'image est redimensionnée mais elle n'occupe pas toute la hauteur utile de la page. Je pense que le probléme est là mais je ne vois pas ce que j'ai oublié :

Code :

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

size.offsetHeight+size.offsetTop

Voici un lien avec une image en 875x718 si tu veux essayer le code :

http://img117.imageshack.us/img117/871/testgj1.jpg

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
<html>
<head>
</head>
<body>
<img style="position: absolute; top:0px; left:0px; width:100%" src="testgj1.jpg" id="image" name="image" hspace="0" vspace="0">
<script type="text/javascript">
<!--
var theImage = document.getElementById("image");
function resizepict() {
   var size = document.getElementsByTagName("html")[0];
   if (size.offsetHeight+size.offsetTop < 718) {
      var H= size.offsetHeight+size.offsetTop;
      theImage.style.heigth = H+"px";
      theImage.style.width = (718*H/875)+"px"; 
   }
   // Centre l'image :
   var Top = parseInt((size.offsetHeight + size.offsetTop - theImage.offsetHeight)/2)
   var Left = parseInt((size.offsetWidth + size.offsetLeft - theImage.offsetWidth)/2)
   theImage.style.top=Top+"px";
   theImage.style.left=Left+"px";
}
resizepict();
document.title="Afficher l'image : " + theImage.src;
document.onresize=resizepict;
 
-->
</script>
</body>
</html>

Redimensioner une image en fonction de la hauteur utile de la fenêtre

JavaScript

Discussions similaires

Partager

Partager