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

Version imprimable

02/10/2004, 05h48
CDRIK

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

Bonjour,

Voici un petit bout de code :

Code:

<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:

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. :D

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

Code:

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

et si tu veux passer par une fonction :
Code:

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>

et finalement:
Code:

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)

02/10/2004, 15h13
CDRIK

Merci pour ces réponses .

Cependant mon code est le suivant :

Code:

<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. :D
Si vous avez d'autres idées, je suis preneur.
Je vais continuer à me prendre la tête sur ce pb.

bon ok, teste ça:

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

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
<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:

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

03/10/2004, 09h25
CDRIK

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

Encore merci :D
08/10/2004, 03h05
leris

salut,

Citation:

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 ! :lol:

L.