Positionnement par rapport à l'écran

Signaler
Messages postés
2
Date d'inscription
lundi 9 mai 2005
Statut
Membre
Dernière intervention
10 mai 2005
-
Messages postés
2
Date d'inscription
lundi 9 mai 2005
Statut
Membre
Dernière intervention
10 mai 2005
-
Bonjour,

Plutôt débutant, je tente désespérément de corriger le script suivant pour que l'image qui apparait se mette pile poil au centre de la page en fonction de la résolution de l'écran et non pas en fonction du nombre de pixels partant du haut et de la gauche du navigateur.

Quelqu'un est-il capable de corriger ce script pour moi en sachant que l'image doit avoir une largeur de 504 pixels et une hauteur de 308 pixels.? Merci d'avance.

Tanguy

Script:

<script>
<!--
// D'après un script de U. Dudli et P. Gehrig
// La largeur de l'image (en pixels).
var imgwidth=504
// La position horizontale et verticale de l'image.
var pos_left=100
var pos_top=100
// Le nom de l'image.
var imgname="LOGO%20St%20Vincent.jpg"
// Le lien associé à l'image sinon utilisez "#".
var imgurl="page1bis.htm"
// La vitesse de l'effet. (+ grand = + lent).
var speed=20
// Le pas de l'effet. Affecte aussi la vitesse (+ grand = + vite).
var step=10
// Petit temps de pause (facultatif) avant l'effet (en microsecondes).
var pause=500
///////////////////////////////
imgpreload=new Image()
imgpreload.src=imgname
var i_loop=0


function stretchimage() {
if (i_loop<=imgwidth) {
if (document.all) {
imgcontainer.innerHTML=""
}
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
}


function initiate() {
if (document.all) {
document.all.imgcontainer.style.posLeft=pos_left
document.all.imgcontainer.style.posTop=pos_top
var timer=setTimeout("stretchimage()",pause)
}
if (document.layers) {
document.imgcontainer.left=pos_left
document.imgcontainer.top=pos_top
var timer=setTimeout("rotatenetscape()",pause*2)
}
}


function rotatenetscape() {
document.imgcontainer.document.write("")
document.imgcontainer.document.close()
}
// -->
</script>

4 réponses

Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005

D'abord, ton code date de ie4 et du defunt NS4, il faut te mettre au gout du
jour. Je pense que tu veux ton image au milieu de la fenêtre du navigateur

Maintenant, il y a les syntaxes ie et gecko
gk=window.Event?1:0
db=!document.documentElement.clientWidth?document.body:document.documentElement //quirk IE6
récupérer les dimentions de la fenêtre et des ascenceurs:
fx=gk?innerWidth-20:db.clientWidth //l fenêtre
fy=gk?innerHeight:db.clientHeight //h fenêtre
sy=gk?pageYOffset:db.scrollTop; //scroll v

with(document.getElementById('imgcontainer').style){
left=(fx-504)/2+"px";top=sy-13+(fy-308)/2+"px";
}
Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
3
Salut!

Je te propose plutôt une solution encore plus au gout du jour les CSS. Pas de javascript donc compatible presque partout et dynamique lors de changement de taille car la position est explimé en %.


<html>
<head>
<title>Untitled</title>
<STYLE type="text/css">
#imageCentree {
position:absolute;
width:504px;
height:308px;
margin-top:-154px; /* 50% de la hauteur */
margin-left:-252px; /* 50% de la largeur */
top:50%;
left:50%;
}
}
</STYLE>
</head>

"imageCentree">

</html>

A+, Ghislain
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005

Ok, Ghislain, c'est effectivement mieux, mais dans mon script, j'avais
prévu de centrer même avec un ascenceur. Dans ce cas, il suffit de
mettre la position:fixed qui ne fonctionne sur IE qu'en arrière plan



a+, Michel
Messages postés
2
Date d'inscription
lundi 9 mai 2005
Statut
Membre
Dernière intervention
10 mai 2005

Oula doucement parce que là, je suis tellement mauvais que je ne sais même pas où je dois intégrer les codes que vous me donnez.

Et attention j'aimerais maintenir l'apparition de l'image avec effet aggrandissant qui s'arrête lorsque l'image est au centre du navigateur. Je ne sais pas si vos propositions me le permettent. Avec la solution de Ghislain, j'ai l'impression que je perds l'effet voulu, tandis que ta solution, Michel, je ne sais pas quoi en faire. Je ne sais pas entre quelles balises je dois placer ce code ou bien dois-je le placer dans le script? Bref, j'ai pas trop compris.

Alors ce que je veux bien c'est que vous fassiez un copier coller du script avec les corrections qu'il faut y apporter ou alors si vous avez une solution meilleure, par exemple un autre script qui produit le même effet, j'y suis également ouvert. Merci pour la peine que vous vous donnez à répondre à un débutant comme moi.

Ciao,

Tanguy