docComment créer un POP
download 
Plainte Transcription
Comment créer un POP
Comment créer un POP-UP ?
Commencez par faire un lien normal vers la page en question (ou vers une image ou un
fichier pdf par exemple…) en précisant (si vous êtes dans Frontpage) comme cadre de
destination Nouvelle fenêtre. Dans le code Html, la commande serait semblable à:
<a href="page-en-question.html" target="_blank">texte du lien</a>
Vous ajoutez ensuite ceci:
<a href="page-en-question.html" target="_blank"
onclick="javascript:window.open(this.href,'popup','toolbar=0,location=0,scrollbars=0,director
ies=0, menuBar=1,resizable=1,width=550,height=260,top=0,left=0'); return false;">texte
du lien</a>
Attention, tout mettre sur une seule ligne !
Ici, c'est une fenêtre de 550 pixels par 260, collée dans le coin supérieur gauche. Cela se
modifie en changeant les valeurs de width, height, top et left qui s'expriment en pixels.
Pour toolbar, location, directories, menubar et resizable, vous les placez à 0 ou 1, selon
l'aspect voulu pour la fenêtre.
Note: il est important de laisser le lien normal, contrairement à ce qui est indiqué dans
beaucoup de scripts qu'on trouve dans Internet, car cela permet d'une part aux moteurs de
trouver votre page et, d'autre part, à ceux qui ont désactivé JavaScript de voir votre page,
mais dans une fenêtre normale.
En prime, voici la liste complète des propriétés:
directories : affichage de la barre de liens
menubar : affichage de la barre de menu
status : affichage de la barre de statut
location : affichage de la zone d'adresse
scrollbars : affichage des barres de scrolling
resizable : autorise le redimensionnement de la fenêtre pop-up
height : hauteur en pixels
width : largeur en pixels
left : position horizontale en pixels sur l'écran
top : position verticale en pixels sur l'écran
Changer les couleurs des barres de scrolling
verticales et horizontales
Il suffit de mettre ce petit script dans la partie <head> et de changer les codes de
couleur (les mettre en hexadécimal)
attention à ne pas mettre des couleurs trop criardes
<style TYPE="text/css">
BODY {
scrollbar-face-color: #3333FF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #33CCFF;
scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: black;
scrollbar-track-color: #3399FF;
scrollbar-arrow-color: #FFFFFF ;
}
</style>
Explications :
. scrollbar-face-color:
définit la couleur du dessus des boutons et de la barre de défilement.
. scrollbar-shadow-color:
définit la couleur sombre du relief des boutons (noir conseillé).
. scrollbar-highlight-color:
définit la couleur claire du relief des boutons (blanc conseillé).
. scrollbar-3dlight-color:
définit la couleur claire du relief des boutons quand ceux-ci ne sont pas enfoncés (noir conseillé).
. scrollbar-darkshadow-color:
définit la couleur sombre du relief des boutons quand ceux-ci ne sont pas enfoncés (noir
conseillé).
. scrollbar-track-color:
définit la couleur du fond de la barre.
. scrollbar-arrow-color:
définit la couleur des flèches. Voila, il ne vous reste plus qu'à vous laisser aller à votre
imagination !
A savoir que les propriétés des scrollbars ne sont visibles qu’avec « IE »… Et donc non compatible Firefox
En passant votre fichier dans un validateur CSS vous aurez des erreurs :)
