Recuperation de la taille d'une image avec la propriété SRC

**CDRIK** · 02/10/2004, 05h48

Bonjour,

Voici un petit bout de code :

Code :

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

<IMG SRC="photos/divers/DSCF0002.JPG" WIDTH=100 onClick="load(this)">

Ma fonction load() est en Javascript. Elle ouvre une nouvelle fenetre avec l'image. Jusque là, pas de pb. Je voudrais maintenant ajuster la taille de cette fenêtre à l'image.
Pour cela, j'ai essayé :

Code :

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

this.src.width

pour récupérer la taille de l'image mais cette propriété ne retourne rien (j'ai fait un test avec un alert() ).

Comment faire pour récupérer la taille de cette image ???

Merci.

**tony montana** · 02/10/2004, 07h44

salut,
je viens de tester, et les propriétés width et height sont bien accessible en javascript. Ex :

Code :

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

<IMG SRC="newsHead.jpg" onClick="alert(this.width)">

et si tu veux passer par une fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<script type="text/javascript">
function load(img)
	{
	alert("width : "+img.width+"\nheight : "+img.height);
	}
</script>
<body>
<IMG SRC="newsHead.jpg" onClick="load(this)">
</body>
</html>

**javatwister** · 02/10/2004, 11h36

et finalement:

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript"> 
function load(img){ 
l=parseInt(img.width)+20+"px";
L=parseInt(img.height)+20+"px";
win2=window.open(img.src,'image','width='+l+',height='+L);
}
</script>

(à tester en ligne, comme ça, l'affichage correspond vraiment à une adresse http)

**CDRIK** · 02/10/2004, 15h13

Merci pour ces réponses .

Cependant mon code est le suivant :

Code :

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

<IMG SRC="photos/divers/DSCF0002.JPG" WIDTH=100 onClick="load(this)">

Ce qui veut dire que quand j'appelle img.width dans la fonction javascript, j'obtiens la largeur de l'image affichée (à savoir 100px ici) et non la taille réelle de l'image...

Le code que vous m'avez donné marche lorsque l'on ne precise pas les attributs WIDTH et HEIGHT dans la balise IMG. Mais sinon, ca marche pas...dsl et merci d'avoir essayé de m'aider.

Si vous avez d'autres idées, je suis preneur.
Je vais continuer à me prendre la tête sur ce pb.

**javatwister** · 02/10/2004, 18h59

bon ok, teste ça:

disons que ta page de départ contient diverses images en miniatures dans un conteneur nommé "cadre"

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>tableau d'images miniatures</title>
<style type="text/css">
.mini {width:100px}
</style>
</head>
 
<body> 
<div id="cadre">
<img class="mini" src="" alt="" /><br />
<img class="mini" src="" alt="" /><br />
<img class="mini" src="" alt="" /><br />
</div>
 
<script type="text/javascript"> 
var im;
var mini=document.getElementById('cadre').getElementsByTagName('img');
for(i=0;i<mini.length;i++){
mini[i].onclick=function(){im=this.src;win2=window.open('agr.htm','agr','width=100px,height=100px')}
}
</script>
 
</body> 
</html>

tu crées une autre page html que tu nommes agr.htm avec ce contenu:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Image en taille réelle</title>
<style type="text/css">
body {margin:0px}
</style>
 
<script type="text/javascript">
function aff(){
if(opener){
imag=document.getElementById('ima');
imag.src=opener.im;
window.resizeTo(imag.width,imag.height);
this.focus()};
}
</script>
</head>
 
<body onload="aff()" onblur="window.close()"> 
<div>
<img id="ima" alt="taille réelle" />
</div>
</body> 
</html>

et voilà

appelle-moi si y a un pbm

**CDRIK** · 03/10/2004, 09h25

Merci.
Ca marche nickel. J'aurais jamais penseé faire autant de manip pour si peu.

Encore merci

**leris** · 08/10/2004, 03h05

salut,

Ca marche nickel

formidable ! avec la democratisation de l'ADSL on peut se permettre d'afficher une pleine page de "fausses" miniatures de +de 40 ou 50 Ko .
que les modems 56ko aillent voir ailleurs .

et si vous voulez remplacer par des "vraies" ... trouvez un autre script !

L.

Recuperation de la taille d'une image avec la propriété SRC

JavaScript

Discussions similaires

Partager

Partager