begin process at 2012 05 29 19:56:59
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Archive Javascript

 > 

Archives

 > 

Débutants

 > 

Positionnement par rapport à l'écran


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Positionnement par rapport à l'écran

lundi 9 mai 2005 à 15:14:20 | Positionnement par rapport à l'écran

Tiish

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="<a href='"+imgurl+"'><img width='"+i_loop+"' src='"+imgname+"' border='2'></a>"
}
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("<a href='"+imgurl+"' target='_blank'><img src='"+imgname+"' border='0'></a>") 
document.imgcontainer.document.close() 
}
// -->
</script>

lundi 9 mai 2005 à 22:50:49 | Re : Positionnement par rapport à l'écran

chimelpremier

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";
}
mardi 10 mai 2005 à 03:00:48 | Re : Positionnement par rapport à l'écran

GhislainLavoie

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>
<body>
<div id="imageCentree">
<img src="001.jpg" width="504" height="308" alt="" border="0">
</div>
</body>
</html>



A+, Ghislain
mardi 10 mai 2005 à 09:20:32 | Re : Positionnement par rapport à l'écran

chimelpremier

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

mardi 10 mai 2005 à 13:31:45 | Re : Positionnement par rapport à l'écran

Tiish

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



Cette discussion est classée dans : image, var, document, pos, imgcontainer


Répondre à ce message

Sujets en rapport avec ce message

recuperation coordonnees image pour base de données [ par elodielole ] Slt à tous j'ai donc un gros pbe ça fait plusieurs jour que je bosse dessus, en fait j'aimerais pouvoir recuperer les coordonnées dans ma table d'une Comment récupérer le style d'un élément ? [ par eplanet ] Bonjour à tous, J'essaie d'écrire script qui insère une image dans le document HTML et qui récupère ensuite sa position absolue.Voici mon script (simp Pb de compatibilité [ par DTiGDB ] Bonjour à toutes et à tous ! Je suis débutant dans le monde de la programmation web. J'ai essayé de faire un menu sympa en m'inspirant d'autres source document.images.src qui ne fonctionne pas sous IE [ par MrChrist ] Bonjour, je travaille présentement sur une boutique virtuelle... Chaque item a une photo principale et plusieurs thumbnails, je veux que la photo prin galerie simple avec image grossissante au survol et replacement auto [ par The Pooh ] Bonjour à tous. peut être que ce topic existe déjà (cela ne m'étonnerai pas :) mais je ne lai pas trouvé. Voilà j'ai ce script avec ses variable que redimensionner une image [ par xzonz ] bonjour a toutes et tous [^^clinoeil1] voila ma question: j'ai une page toute simple (pour le moment) sur laquelle il y a des liens pointant vers de problème de vieux script avec autres navigateurs [ par Joce1605 ] Bonjour à tous, je cherche de l'aide. J'ai trouvé unvieus script sur le web qui ne fonctionne que sous IE, serait-il possible de l'adapter pour tous l play auto ???? [ par dingofou ] Bonjour a tous j'ai pas mal cherche sans trouver, je voudrais savoir comment fait-on pour proteger un fichier audio.mp3.Que l'on puisse seulemnt l'ec Ajout d'une couleur dans l'effet texte néon [ par chrisdivx ] Bonjour, Je souhaiterais ajouter une couleur supplémentaire aux 2 couleurs mobiles de ce code mais je n'y arrive pas. Merci de votre aide (je suis dé Creer un formulaire de calcul [ par quinton75 ] Bonjour, J'essaie de crée un formulaire qui multiplie le nombre de place par le prix mais ça ne fonctionne pas [^^sad2][^^sad2] [code=js] func


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 4,586 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales