Discussion :

[Cyrilh7]

Salut!

Pour connaitre la largeur d'une image c'est:

Code :

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

1
2
 
var w=document.getElementById('image').width;

Pour connaitre la taille réel de l'image sous netscape/ mozilla:

Code :

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

1
2
 
var w=document.getElementById('image').naturalWidth

mais comment fait-on pour connaitre la taille réelle de l'image sous internet exploreur???

[SpaceFrog]

offsetWidth ou clientWidth

[SpaceFrog]

heu qu'entends tu par naturelle ?
si ce sont les dimensions intrinsèques de l'image, il faudra es charger sans précisier la taille puis recuperer le offsetWidth ...

[Cyrilh7]

Il s'agit éffectivement des dimensions intrinsèques
ex: mon image a pour résolution 512*200, elle est affiché à l'écran en 200*100; Et moi ce que je veux récupérer c'est 512*200.

Apparament le code suivant fonctionne sous netscape/ mozilla: (je ne l'ai pas encore tester).

Code :

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

1
2
 
var w=document.getElementById('image').naturalWidth

offsetWidth et clientWidth correspondent à des valeurs affichées (avec ou sans padding?) et non pas à la résolution de l'image.


réferrence microsoft:

Code :

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

1
2
3
4
5
6
 
clientWidth
Retrieves the width of the object including padding, but not including margin, border, or scroll bar.
 
offsetWidth
Retrieves the width of the object relative to the layout or coordinate parent, as specified by the offsetParent property.

Une autre idée?

[SpaceFrog]

la seule possibilité est de charger l'image dans un div hidden et d'en recupérer le offsetWidth (et Height)
on ne peut pas récupérer les attributs de l'image ...

[Cyrilh7]

Ok merci, je vais essayer ça, mais quand même y pourait ce bouger chez microsoft!

[Cyrilh7]

J'ai essayé le script:

Page:

Code :

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

1
2
 
<div style="DISPLAY: none; POSITION: relative; z-index: 0;"><img id="carteNatural" src="../image.bmp"></div>

Script pour récupérer les dimentions de l'image:

Code :

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

1
2
3
4
 
var h=document.getElementById('carteNatural').offsetHeight;
var w=document.getElementById('carteNatural').offsetWidth;
document.writeln(w+"-"+h);

Résultat: 0-0
La largeur et la hauteur de l'image sont null! Peut-être parce que l'image est cachée?

[SpaceFrog]

à quel moment lances tu le script pour recupérer les dims ?

heu et aussi pas en display none mais en visibility:hidden ...

[Matthieu2000]

.bmp

pas très recommander...

[Cyrilh7]

Effectiviement comme ça, ça marche mieux, merci SpaceFrog

Code :

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

1
2
 
<div style="visibility: hidden; DISPLAY: block; POSITION: absolute; z-index: 0;"><img id="carteNatural" src="../image.bmp"></div>

Un problème persiste cependant, c'est que je ne peux positionner cette image dans la page sans détruire la mise en page! aille!!! L'image est trop grande! Il faudrait que celle ci ne modifie pas la mise en page de ma vue.


PS pour Matthieu2000: Je sais le bmp c'est vraiment pas terrible pour du web mais dans mon cas je fais avec ce qu'il y a (ressources partagées entre un programme c++ et une application web), et puis l'application est desdinée à être utilisé en local donc pas de problème de vitesse.

[SpaceFrog]

modifies le z-index du div ... genre 100

[Cyrilh7]

C'est une bonne idée mais l'image est trop grande:
Je suis en résolution 1024*768
mon image fait un demi écran 512*768
et dans l'interface web l'image utilise toute la hauteur disponible du navigateur (environ 600 car barres d'outils du navigateur).
Si j'insère mon image caché en taille réelle alors j'ai l'assenceur qui apparait!
Et si je modifie la taille de mon image caché alors adieu la définition de mon image...

[SpaceFrog]

mets ton div en overflow:hidden

[Cyrilh7]

Ca semblait être une bonne idée, mais ça n'a rien changé? C'est peut être mon code:

Code :

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

1
2
 
<div style="overflow: hidden; visibility: hidden; DISPLAY: block; POSITION: absolute; z-index: 100;"><img id="carteNatural" src="../image.bmp"></div>

[SpaceFrog]

mets lui un height et un width de 0px ...

[SpaceFrog]

ou mets un overflow hidden au body ...

[Cyrilh7]

Je n'avais pas pensé à mettre le div à 0!
Ca y est ca marche!!!
Un grand merci! Et méacoulpa!!!