Elles permettent de visionner des documents extérieurs tout en continuant à disposer d'une "commande centrale", c'est-à-dire les différents liens éventuels de la "page maîtresse".
A part l'usage d'IFRAME, lisible uniquement par Internet Explorer (du moins jusqu'à présent), les autres techniques de frame réduisent les dimensions de l'écran, parfois de façon insupportable.
Il existe un remède à ce problème : la fenêtre dite "pop-up" (beurk, encore un vilain anglicisme), ce qui signifie littéralement "fenêtre escamotable". Je préfère la nommer fenêtre à dimensions réglables : c'est précisément son grand avantage !
Cette possibilité d'afficher n'importe quelle page et toutes ses variantes est tout simplement géniale : cela vous permet de naviguer sans contrainte d'écran ! Tout le contraire des frames qui sont totalement rigides, installées définitivement dans un ensemble, normalement non modifiables par le visiteur d'une page.
Vous voyez ci-dessous 3 liens : cliquez sur chacun d'entre-eux mais attention : fermez chacune des fenêtres affichées avant d'appeler la suivante ! Dans le cas contraire, elle s'installera dans la barre de tâches ... tout en changeant malgré tout à chaque activation d'un autre lien ... mais sans se montrer ! Rassurez-vous : vous pourrez la faire revenir en l'activant sur ladite barre de tâches !
Voir le logo Valrance ..... Voir un lactaire camphré .....Voir la page d'adresses utiles
Vous aurez constaté que la première s'affiche entièrement, la seconde partiellement et la troisième essaye d'insérer le maximum de texte dans l'espace disponible ! Vous verrez plus loin pourquoi.
Vous aurez compris que ce type de fenêtre permet d'afficher aussi bien les objets que les pages html !
Voyons le script de base :
<script>function
mevla() { exemple=window.open
("","photo",
"width=165,height=125,scrollbars=no,
toolbar=no, menubar=no, location=no, directories=no,
resizable=no, status=no") } </script>
Sa raison d'être est simple : créer une fonction qui s'appelle mevla, y installer le nom générique du document et régler en largeur et en hauteur la fenêtre d'affichage : ici 165 et 125 pixels, valeurs encadrant parfaitement le premier document appelé. Comme nous avons fait appel à 3 documents de tailles différentes, les suivants ne pourront s'afficher entièrement que si nous agrandissons le cadre en cliquant sur son bouton d'agrandissement, exactement comme avec un logiciel (traitement de texte, tableur, etc ....) utilisé sur votre PC.
Vous aurez remarqué qu'il existe 7 variables
réglées, par défaut, en NO : nous verrons plus
loin leur usage.
Voici le script que vous installerez dans le BODY de votre page, à l'endroit où se trouvera votre lien :
<A
HREF="../diapos/rancema1.jpg"
TARGET=photo
onclick="mevla()"><B>Voir
le logo Valrance</B></A>
En bleu, il s'agit
évidemment de l'adresse de votre lien.
En fuchsia, le nom attribué à la variable TARGET
(ici photo) pour le
document que nous voulons voir afficher.
En rouge, lors de la commande "onclick" on déclenchera la
fonction mevla.
En vert, vous aurez compris qu'il s'agit du
texte du lien à
activer.
Mais revenons au premier script, celui qui contient les 7 variables. Par défaut, elles sont toutes réglées à NO.
En modifiant la valeur par défaut, voici ce qu'elles permettent :
scrollbars=no ..... si yes : toolbar=no..... si yes : menubar=no ..... si yes : location=no ..... si yes : directories=no ..... si yes : resizable=no ..... si yes : status=no ..... si yes : installera des barres de défilement dans la
fenêtre installera la barre d'outils installera la barre de menu du navigateur installera le champ permettant de voir l'arborescence
en cours installera votre propre barre d'outil (en principe vos
liens) permettra au visiteur de modifier la taille de
fenêtre avec la souris installera une barre d'état
Cela ouvre bien des horizons ! Si vous n'avez pas "manipulé" les pages appelées par les liens ci-dessus, revenez quelque peu en arrière et rappelez la deuxième ou la troisième. Vous verrez que vous pourrez la dimensionner à votre guise. En effet, dans le script de cet exposé, j'ai réglé "resizable=yes", ce qui permet cette manipulation.
Vous ne pouvez afficher totalement la troisième page ? Qu'à cela ne tienne : en reproduisant le script mais activant le "scrollbars" par YES, vous auriez pu y lire tout le contenu en faisant glisser les barres de défilement ...
Vous aurez compris que ce système de fenêtrage est d'une très grande souplesse et agit en somme comme un second navigateur (comme les frames) puisque les liens qui s'y trouvent peuvent être également activés !
Mais ce n'est pas tout ! Vous pouvez substituer à "onclick"
d'autres attributs :
onmouseover
permettra de déclencher l'évènement au passage
de la souris
onload
sera l'attribut de déclenchement au démarrage de la
page
onkeypress
remplacera la souris : l'appui d'une touche du clavier provoquera
l'ouverture de la fenêtre
et quelques autres astuces encore ... que vous apprendrez en
bouquinant un bon guide Javascript !
Attention : j'allais oublier et c'est fort opportunément qu'un sympathique animateur de forum de discussions, Patrice pour ne pas le nommer (dont vous trouverez l'adresse ... dans les bonnes adresses), m'a fait remarquer que le script ne pouvait être utilisé tel quel avec l'attribut onload. J'allais pécher par excès de confiance et de hâte à publier un exposé qui n'aurait pas été complet ...
Je vous en livre ci-dessous la syntaxe afin de vous éviter la calvitie :
<script>function
mevla() exemple=window.open
("../diapos/rancema1.jpg","photo", "width=165,height=125,scrollbars=no,
toolbar=no, menubar=no, location=no, directories=no, resizable=yes,status=no") }</script> <BODY BGCOLOR="#FFFFFF"
onload="mevla()">
Vous aurez remarqué que le lien appelant le fichier à afficher dans la fenêtre ... pop-up (décidément je n'aime pas cela !) est écrit dans la définition de celle-ci et non dans le corps de la page. Faut-il préciser que "exemple" n'est là que pour vous montrer qu'il s'agit d'un exemple reprenant les éléments d'une de mes pages ? Eliminez-le donc lorsque vous installerez ce script dans votre propre page !
Magique, non ?