<html>
<head>
<title></title>
<script type="text/javascript">
<!-- Debut
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"
var FenPopUp
var UrlPopUp
var LargPopUp
var HautPopUp
var MargePopUp=10
var PopupPositionHaut=MargePopUp
var PopupPositionGauche=MargePopUp
var pause=20
var step=20
var LargEcran
var HautEcran
var FinPosition_x
var FinPosition_y
var timer
/* On commence ici par une liste de déclaration de variables */
/* ---===== Fonction d'ouverture du PopUp =====--- */
function OuvrePopUp(UrlPopUp,LargPopUp,HautPopUp) {
FenPopUp=window.open(UrlPopUp, "MonPopup",
"toolbar=no,width="
+LargPopUp+
",height="
+HautPopUp+
",top="
+PopupPositionHaut+
",left="
+(PopupPositionGauche)+
"");
/*
Cette première fonction nous permet d'ouvrir le PopUp (et de lui donner le nom de FenPopUp, je sais c'est hyper original), elle reçois en argument l'URL de la page ainsi que sa largeur et sa hauteur.
Puis on ouvre notre PopUp avec open, méthode de l'objet window, en lui donnant des options comme :
- sa largeur (variable LargPopUp)
- son hauteur (variable HautPopUp)
- sa position par rapport au haut du document (variable PopupPositionHaut)
- sa position par rapport à la gauche du document (variable PopupPositionGauche)
- puis d'autres options comme la barre d'outils. Vous pouvez bien sur en ajouter à votre guise.
*/
LargEcran=window.screen.width
HautEcran=window.screen.height
FinPosition_x=LargEcran-LargPopUp-MargePopUp
FinPosition_y=HautEcran-HautPopUp-MargePopUp
BougeBas()
}
/*
Nous allons terminer notre fonction en récupérant des informations sur l'écran du visiteur (attention ce n'est pas la taille de la fenêtre mais bien la taille de l'écran que l'on récupère ici) et les mettre dans des variables.
Dans LargEcran et HautEcran nous allons mettre respectivement la largeur et la hauteur de l'écran (je suis sur que vous ne vous en doutiez pas hein ?). Pour ce faire nous utilisons les propriétés width et height de l'objet screen associé à l'objet window.
Une fois ceci dans notre sac (enfin dans nos variables) il faut savoir ou se trouve la fin de l'écran ou afficher notre PopUp (ben oui sinon il va continuer vitam eternam. Donc la un petit peu de math s'impose.
Pour déterminer le plus à gauche et le plus bas ou sera affiché notre PopUp (eh oui, on positionne en fonction des bord haut et gauche, tout simplement parce que le 0 c'est le coin en haut à gauche de votre télé écran) on soustrait la taille de l'écran (LargEcran ou HautEcran) moins la taille du PopUp (LargPopUp ou HautPopUp) moins la marge que vous vous êtes fixé (MargePopUp, fixé à 10 dans nos déclaration de variables au début).
On fois tout ceci fait on appelle la fonction BougeBas() pour commencer notre mouvement vers le bas.
*/
/* ---===== Fonction déplacement vers le bas =====--- */
function BougeBas() {
if (PopupPositionHaut<=FinPosition_y-50) {
FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
PopupPositionHaut+=step
timer= setTimeout("BougeBas()",pause)
}
else {
clearTimeout(timer)
PopupPositionHaut=FinPosition_y-50
FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
BougeDroite()
}
}
/*
Nous commencons notre fonction par une condition crée avec l'instruction if, qui vérifie que la variable PopupPositionHaut (qui contient la valeur en Y (verticale) du coin supérieur gauche du PopUp) soit inférieure à la variable FinPosition_y (position verticale la plus basse possible calculée précedement) moins 50 (le grand jeu du script, deviner à quoi correspondent ces 50. Réponse en tout bas). Donc si notre condition est vérifiée nous alons déplacer notre PopUp (ayant pour nom FenPopUp) en utilisant la méthode moveTo de l'objet window qui reçois en coordonées PopupPositionGauche et PopupPositionHaut.
Nous ajoutons à la variable PopupPositionHaut la valeur de step (défini en haut dans les variables) avec l'opérateur d'affectation += (Addition).
Et enfin nous créons un compteur timer avec la méthode setTimeout qui rapellera la fonction toutes les 20 (valeur de la variable pause) millisecondes.
Si notre condition n'est plus vérifiée, on annule notre compteur timer avec la méthode clearTimeout et on repositionne notre PopUp (toujours moveTo) à la valeur la plus basse voulue (PopupPositionHaut=FinPosition_y-50) puis on lance la fonction BougeDroite().
*/
/* ---===== Fonction déplacement vers la droite =====--- */
function BougeDroite() {
if (PopupPositionGauche<=FinPosition_x) {
FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
PopupPositionGauche+=step
timer= setTimeout("BougeDroite()",pause)
}
else {
clearTimeout(timer)
PopupPositionGauche=FinPosition_x
FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
BougeHaut()
}
}
/*
Bon la rien d'exceptionnel par rapport à la fonction précédente, on ajoute juste la valeur de la variable PopupPositionGauche de la valeur de step à ce qui donne l'effet de déplacement vers la droite.
*/
/* ---===== Fonction déplacement vers le haut =====--- */
function BougeHaut() {
if (PopupPositionHaut>=MargePopUp) {
FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
PopupPositionHaut-=step
timer= setTimeout("BougeHaut()",pause)
}
else {
clearTimeout(timer)
PopupPositionHaut=MargePopUp
FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
BougeGauche()
}
}
/* Toujours pareil, sauf que pour monter on enlève la valeaur de step à PopupPositionHaut. */
/* ---===== Fonction déplacement vers la gauche =====--- */
function BougeGauche() {
if (PopupPositionGauche>=MargePopUp) {
FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
PopupPositionGauche-=step
timer= setTimeout("BougeGauche()",pause)
}
else {
clearTimeout(timer)
PopupPositionGauche=MargePopUp
FenPopUp.moveTo(PopupPositionGauche,PopupPositionHaut)
}
}
/* Et la pour déplacer vers la gauche on enleve step à PopupPositionGauche */
// -->
</script>
</head>
<body onLoad="OuvrePopUp('popup.html','480','60')">
<!--
Bon la j'ai utilisé l'événement onLoad pour appeler ma fonction mais vous pouvez l'appeler comme bon vous semble hein...
-->
</body>
</html>
Bien sur vous pouvez, a votre guise, modifier l'ordre des fonctions pour changer le déplacement.
Réponse au jeu : Les 50 de la fonction BougeBas() correspondent a la barre windows que vous pourriez avoir. | 
