Fonction ratioImage (resize d'image propotionnel) incompatible IE9

**bartman44** · 15/10/2012, 14h14

Bonjour,

La fonction ratioImage (ci-dessous) n'est pas compatible avec IE9 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script language="javascript">
function ratioImage(urlImage,largeurImg){
photo=new Image();
photo.src=urlImage;
var photoWidth=photo.width;
var photoHeight=photo.height;
var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
var newPhotoWidth=photoWidth*ratio;
var newPhotoHeight=photoHeight*ratio;
document.write("<img class=\"image_presentation\"  src=\"" + urlImage + "\" width=\"" + newPhotoWidth + "\"  height=\"" + newPhotoHeight+ "\" />");
};
</script>

A appeler comme ceci :

Code :

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

1
2
3
<script language="javascript">
ratioImage("http://www.clickonmylinks.fr/wp-content/images/singe1.jpg",100)
</script>

Auriez-vous une solution de remplacement pour cette fonction ?

D'avance merci.

**andry.aime** · 15/10/2012, 17h01

Bonjour,

Code :

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

<script type="text/javascript">

Utilise appendChild à la place de document.write

Code :

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

1
2
3
4
5
6
7
8
9
10
function ratioImage(urlImage,largeurImg){
	photo=new Image();
	photo.src=urlImage;
	var photoWidth=photo.width;
	var photoHeight=photo.height;
	var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
	photo.width = photoWidth*ratio;
	photo.height=photoHeight*ratio;
	document.body.appendChild(photo);
};

A+.
A+.

**bartman44** · 16/10/2012, 12h19

Bonjour,

J'ai repris la fonction telle que vous l'aviez modifié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
<html>
<head>
<script type="text/javascript">
function ratioImage(urlImage,largeurImg){
	photo=new Image();
	photo.src=urlImage;
	var photoWidth=photo.width;
	var photoHeight=photo.height;
	var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
	photo.width = photoWidth*ratio;
	photo.height=photoHeight*ratio;
	document.body.appendChild(photo);
};
</script>
</head>
<body>
<script type="text/javascript">
ratioImage("http://www.clickonmylinks.fr/wp-content/images/singe1.jpg",100)
</script>
</body>
</html>

Et cette fois-ci, ça ne fonctionne ni sous IE9 ni sur les autres

**devyan** · 16/10/2012, 14h04

Bonjour,

Code :

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

1
2
<body onload="ratioImage("http://www.clickonmylinks.fr/wp-content/images/singe1.jpg",100)">
</body>

devyan

**andry.aime** · 16/10/2012, 14h06

C'est que l'image n'est pas encore chargé, donc il ajoute l'image avec une hauteur et largeur de 0 px.

Code html :

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

<body onload="ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100)">

A+.

**Bovino** · 16/10/2012, 14h11

Non, c'est juste que quand tu ouvres un attribut avec le caractère ", le caractère " suivant fermera l'attribut !
La coloration syntaxique montre clairement que tu as une imbrication de quotes problématique !

**bartman44** · 16/10/2012, 17h02

ça fonctionne :

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
<html>
<head>
<script type="text/javascript">
function ratioImage(urlImage,largeurImg){
	photo=new Image();
	photo.src=urlImage;
	var photoWidth=photo.width;
	var photoHeight=photo.height;
	var ratio=(Math.round((largeurImg/photoWidth)*100))/100;
	photo.width = photoWidth*ratio;
	photo.height=photoHeight*ratio;
	document.body.appendChild(photo);
};
</script>
</head>
<body onload="ratioImage('http://www.clickonmylinks.fr/wp-content/images/singe1.jpg',100)">
</body>
</html>

Donne :

Code :

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

<img width="99" height="73" src="http://www.clickonmylinks.fr/wp-content/images/singe1.jpg">

Par contre ce n'est pas tout à fait ce que je recherche parce que je voudrais pouvoir placer mon image n'importe où dans la page...

Fonction ratioImage (resize d'image propotionnel) incompatible IE9

JavaScript

Vue hybride

Discussions similaires

Partager

Partager