Des pop-up pour expliquer une page html


Dans une page Web, des explications sont souvent offertes par l'intermédiaire de liens pointant sur de nouvelles fenêtres.
Si les pages visées par les liens s'ouvrent dans la même fenêtre, l'internaute peut rapidement perdre le fil de sa lecture (et avoir des difficultés à revenir sur la page initiale).
Si les pages sont ouvertes dans de nouvelles fenêtres, l'internaute risque de se trouver rapidement submergé par toutes les fenêtres qu'il n'aura pas pensé à refermer.

Une solution consiste à faire pointer les liens vers de petites fenêtres qui viennent s'afficher aui dessus de la fenêtre principale.

Un peu de code javascript directement dans le lien peut rendre service de manière ponctuelle : cliquez ici
Le lien ci-dessus s'écrit simplement :
<A HREF="javascript:fen=window.open('about:blank','','left=50,top=50,width=500,height=300');fen.document.write('bonjour !')">cliquez ici</A>

S'il faut faire plusieurs messages dnas la même page, il suffit d'inscrire le texte d'une nouvelle fonction "message" entre deux balises <SCRIPT> dans l'entête de la page. Plus pratique encore, on peut placer la fonction message dans un fichier javascript externe qui pourra être .

La fonction peut s'écrire :

function messpop(truc)
{
while(truc.indexOf("***")>-1)truc=truc.substring(0,truc.indexOf("***"))+"&gt;"+truc.substring(3+truc.indexOf("***"),truc.length)
while(truc.indexOf("zzz")>-1)truc=truc.substring(0,truc.indexOf("zzz"))+"&lt;"+truc.substring(3+truc.indexOf("zzz"),truc.length)
fen=window.open('about:blank','','left=50,top=50,toolbar=0,menubar=0,width=500,height=300')
fen.document.write(truc)
}

function message(chose,truc)
{
//traiter le pb des &gt; et &lt;
while(truc.indexOf("&gt;")>-1)truc=truc.substring(0,truc.indexOf("&gt;"))+"***"+truc.substring(4+truc.indexOf("&gt;"),truc.length)
while(truc.indexOf("&lt;")>-1)truc=truc.substring(0,truc.indexOf("&lt;"))+"zzz"+truc.substring(4+truc.indexOf("&lt;"),truc.length)
//traiter le pb des apostrophes
while(truc.indexOf("'")>-1)truc=truc.substring(0,truc.indexOf("'"))+"xxx"+truc.substring(1+truc.indexOf("'"),truc.length)
while(truc.indexOf("xxx")>-1)truc=truc.substring(0,truc.indexOf("xxx"))+"\\'"+truc.substring(3+truc.indexOf("xxx"),truc.length)
document.write(chose.link("javascript:messpop('"+truc+"')"))
}


La fonction message(chose,truc) crée un lien dont le texte sera chose et qui pointera vers une autre fonction (messpop) qui affichera la nouvelle fenetre contenant le texte truc.

Pour l'utiliser, il suffit d'écrire <SCRIPT>message("cliquez ici","bonjour")</SCRIPT> pour obtenir :

Le message peut contenir des apostrophes (mais pas de guillemets). Les signes < et > doivent être transformés en &lt; et &gt; (si on ne veut pas qu'ils soient interprétés comme des balises). On peut aussi utiliser des balises pour formater le texte.