Comment créer un POP
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 :)