Bric à Brac informatique logo

Création d'une petite fenêtre de commentaire après un clic sur un lien d'une page web

(identifiée parfois sous le nom page pop-up)

Le but de la création de cette fenêtre pop_up est de pouvoir ouvrir une nouvelle fenêtre de dimensions fixes après un clic gauche sur un lien. La fenêtre créée peut être refermée grâce à l'insertion d'un bouton dans cette nouvelle fenêtre.

Pour obtenir ce résultat, il faut opérer en deux temps.

1. Création du lien à insérer

Ouvrir (dans Kompozer ou BlueGriffon) le fichier qui contiendra le lien à activer pour l'ouverture de cette petite fenêtre
Placer le pointeur de la souris à l'endroit du document où doit être être inséré le lien pour ouvrir une petite fenêtre, (fenêtre que nous noterons abc.html dans cet exemple)
Activer la commande : Insertion, Code HTML ...
Saisir le code suivant :

<a href="abc.html" target="wclose" onclick="window.open('abc.html','wclose','width=x,height=y,toolbar=no,status=no')">
mot ou phrase qui servira de lien</a>

abc.html est le nom du fichier pop-up créé dans la partie 2, ci-dessous.
les valeurs x et y doivent être définies en pixels
mot ou phrase qui servira de lien est à remplacer par le nom du lien

Cliquer sur le bouton Insérer dans Kompozer ou OK dans BlueGriffon

2. Création du fichier à ouvrir en petite fenêtre pop-up

Dans Kompozer ou BlueGriffon, cliquer sur l'icône Nouveau pour créer un nouveau fichier (que l'on a nommé abc.html dans la partie précédente)
Insérer texte ou image à afficher dans ce nouveau fichier
Activer la commande : Insertion, Code HTML ...pour créer un bouton de fermeture de la page. Placer le pointeur de la souris (en bas de la page) à l'endroit du document où doit être inséré le bouton Fermer ,
saisir le code suivant :<input value="Fermer la fenêtre" onclick="window.close()" type="button">

Cliquer sur le bouton Insérer (ou OK).
Enregistrer ce nouveau fichier (nous l'avons nommé abc.html)

Exemple de fenêtre de commentaire

Cliquer sur le lien ci-dessus.

Attention ! Cela peut demander un certain temps avant d'obtenir l'ouverture de la fenêtre.

VARIANTE :

Il est possible de mettre une image en lien au lieu d'un texte, le code à insérer devient :

<a href="abc.html" target="wclose" onclick="window.open('abc.html','wclose','width=x,height=y,toolbar=no,status=no')">
insertion de l'image</a>

Remplacer : insertion de l'image par la balise <img src="nom et chemin de l'image">

Exemple

NOTE : Pour information, voir aussi la fiche : création d'infobulle