Resize window & deplacement image

Version imprimable

15/10/2010, 13h26
Ramajb

Resize window & deplacement image

Bonjour,

Comment fait-on pour positionner une image en fonction de la taille de la fenêtre. Quand l'utilisateur redimensionne la fenêtre du navigateur de droite vers la gauche, l'image se met en déplacement automatiquement.
Est qu'on peut faire ça en javascript?

Merci

Code:

1
2
3
window.onresize = function(){
    // Ton code
}

15/10/2010, 13h41
andry.aime
Bonsoir,

Pour le mettre dans une position précise ou selon la dimension de la fenêtre, regarde aussi "style.top" , "style.left" et window.innerHeight/Width.
Code:

1 2 3 4 window.onresize = function(){ // Ton code document.getElementById("idImage").style.top=(window.innerHeight - 120)+"px"; }

Euh, pour IE utilise document.documentElement.clientWidth/Height;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onresize = function(){
    // Ton code
var largeur=0;
var hauteur=0;
if(document.all){
  largeur= document.documentElement.clientWidth;
  hauteur = document.documentElement.clientHeight;
}else{
  largeur= window.innerWidth;
  hauteur = window.innerHeight ;
}
document.getElementById("idImage").style.top=(hauteur - 120)+"px";
document.getElementById("idImage").style.left=(largeur - 80)+"px";
}

A+.

15/10/2010, 13h57
Bovino

Citation:

Envoyé par andry.aime

Euh, pour IE utilise document.documentElement.clientWidth/Height;

Ca dépend :mrgreen:

Code:

var hauteur = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
15/10/2010, 14h02
andry.aime

Citation:

Envoyé par Bovino

Ca dépend :mrgreen:

Code:

... document.body.clientHeight;

C'est pour quel navigateur?
15/10/2010, 14h30
Bovino

IE lorsqu'il n'interprète pas le document comme du XML ;)

Merci pour les réponses que vous avez donnée.
Mais il y a encore un problème. Au moment de la toute première redimensionnement, l'image se faufile directement vers la droite, laissant le centre de l’écran presque vide :(. Donc je suis obligé de faire un scrollbar vers la droite pour voir l'image. Delà si je continu a faire une seconde resize, ça marche :).

Voici mon code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html > <head><title>Smaller / L a r g e r</title> <script type="text/javascript"> window.onresize = function(){ // Ton code var largeur=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //document.getElementById("idImage").style.position="absolute"; document.getElementById("idImage").style.left=(largeur - 10)+"px"; } </script> </head> <body> <div id="header"> <img id="idImage" src="bgd_header.gif" style="position:absolute"/> <div> </body> </html>
Vous avez une idée de l'origine de cette anomalie?

Finalement, je suis parvenu au résultat voulu:

Code:

1
2
3
4
5
6
7
8
9
10
11
window.onresize = function(){
    // Ton code    
var largeur=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
SCREEN = screen.width;
SCREEN_RESIZE= largeur;
 
if(SCREEN_RESIZE < 255)
{    //window.resizable=false;
    return;
}
document.getElementById("idImage").style.left= - (SCREEN - SCREEN_RESIZE);

Merci pour votre aide.