Resize window & deplacement image

**Ramajb** · 15/10/2010, 13h26

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

**Bovino** · 15/10/2010, 13h28

Code :

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

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

**andry.aime** · 15/10/2010, 13h41

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 :

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

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

**andry.aime** · 15/10/2010, 13h47

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

Code :

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

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+.

**Bovino** · 15/10/2010, 13h57

Envoyé par andry.aime

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

Ca dépend

Code :

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

var hauteur = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

**andry.aime** · 15/10/2010, 14h02

Envoyé par Bovino

Ca dépend

Code :

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

... document.body.clientHeight;

C'est pour quel navigateur?

**Bovino** · 15/10/2010, 14h30

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

**Ramajb** · 15/10/2010, 15h07

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 :

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

**Ramajb** · 18/10/2010, 12h24

Finalement, je suis parvenu au résultat voulu:

Code :

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

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.

Resize window & deplacement image

JavaScript

Discussions similaires

Partager

Partager