Un pop-up universel

Le système de pop-up proposé ici vous permettra d'afficher une info-bulle contenant des images ou des liens à n'importe quel endroit de votre page ou de mettre en place un menu déroulant construit à base d'un tableau.

Cette page est issue du site RankSpirit RankSpirit.com. Elle proposée en licence GNU et peut donc être copiée, distribuée et utilisée librement à condition que sa source soit citée.

La plupart des systèmes de menu déroulant dont vous pourrez trouver les codes sont basés sur des listes <LI><UL>. Dans ces système, la feuille de style CSS comporte une section "hover" qui provoque l'affichage d'un bloc div au survol des éléments de la liste. Bien que présentés comme des "menu déroulants en CSS", vous pourrez constater que ces systèmes nécessitent tous quelques lignes de code javascript pour être opérationnels, en raison de l'incapacité d'Internet Explorer à gérer la fonction "hover".

Le logiciel gérant nos menus nous interdisait l'usage de listes et nous obligeait à utiliser une structure à base de tableau. Nous avons donc du développer un système de pop-up adapté. Et tant qu'à utiliser du Javascript, nous avons choisi de gérer notre système entièrement dans ce langage. Le CSS n'est utilisé que pour masquer/afficher le bloc "div" servant de pop-up ainsi que le contenu de ce pop-up.

Voici une démonstration de cette fonction utilisée pour les infobulles.

Voici une démonstration de cette fonction utilisée pour un menu en tableau :

ligne menu 1
ligne menu 2
ligne menu 3

Et voici comment cette fonction est installée dans la page :

Première partie : le javascript

Le code suivant doit être collé entre les balises <head> et </head> :

<script language="javascript">
<!--// ___________________________________
// The following is to add menu popups
// Made by Zapman - www.rankspirit.com


gk=window.Event?1:0; // navigateurs Gecko ou IE
encours = '';

function display_popup(e) {

sObject=gk?e.target:event.srcElement;
if ((sObject.innerHTML)&& (document.getElementById("popup"))){
if (sObject.innerHTML != encours){
encours = sObject.innerHTML;
cont = 1;
while((sObject.parentNode != null) && (sObject.id != "popup") && (sObject.className != "PopIt")) {sObject = sObject.parentNode};

if ((sObject.id != "popup") && (sObject.className != "PopIt")) {document.getElementById("popup").style.display = "none"};

if ((sObject.className == "PopIt") && (sObject.innerHTML.lastIndexOf("hidden") != -1)) {
poshoriz = sObject.offsetLeft; posvert = sObject.offsetTop; pObject = sObject;
while (pObject = pObject .offsetParent) {poshoriz += pObject .offsetLeft; posvert += pObject .offsetTop};
newc = sObject.innerHTML.substring(sObject.innerHTML.lastIndexOf("hidden") + 6);
newc = newc.substring(newc.indexOf(">")+1);
document.getElementById("popup").innerHTML = newc;
document.getElementById("popup").style.top = posvert +"px";
document.getElementById("popup").style.left = (poshoriz + sObject.offsetWidth - 10)+"px";
document.getElementById("popup").style.display = "block";
};
};
};
return 0;
};

// Initialization code.
window.onmousemove = document.onmousemove = display_popup;
//-->
</script>

La fonction mise en place sur le "onmousemove" va surveiller en permanence les éléments survolés par le curseur de la souris.

Si la classe de l'élément survolé est "PopIt", le contenu de l'élément va être examiné afin d'y trouver un bloc ayant pour classe "hidden". Si "hidden" est trouvé à l'intérieur de "PopIt", son contenu va être récupéré dans la variable "newc".

"newc" sera alors injecté dans le bloc <div> portant l'id "popup". Ce bloc "popup" sera rendu visible et positionné à droite du bloc "PopIt".

Le bloc "popup" restera visible tant que le curseur le survolera ou survolera "PopIt". Dans le cas contraire, le bloc "popup" sera à nouveau rendu invisible.

Deuxième partie : les CSS

Le code suivant doit être collé entre les balises <head> et </head> :

<style type="text/css">
<!--
#popup {
BORDER: #C0C0C0 2px outset;
BACKGROUND: white;
POSITION: absolute;
display: none;
}

.hidden {display: none;}

-->
</style>

On donne au bloc popup un cadre ombré et un fond blanc. On défini son "display" comme "none" afin que ce bloc soit invisible par défaut. Il sera rendu visible par la fonction javascript décrite au paragraphe précédent.

On défini également la classe "hidden" comme invisible. Cette classe servira à stocker le contenu du popup en attendant son affichage.

Troisième partie : le bloc utilisé en tant que popup

Le code suivant doit être collé à la fin de la balise <body>(juste avant </body>) :

<div id="popup"></div>

Ce bloc vide sera le popup servant de conteneur pour notre fonction javascript. Son style de présentation est défini dans les CSS. Son contenu sera mise à jour par la fonction javascript décrite ci-dessus (paragraphe "première partie").

Quatrième partie : le texte du popup

Pour associer un texte "popup" à une expression quelconque à l'intérieur de votre page, vous devez mettre en place une construction de ce type :

Voici une <span class="PopIt">d&eacute;monstration de cette fonction utilis&eacute;e pour les infobulles<span class="hidden">Infobulle comportant :<br>
<br><img src="paporange.gif" alt="RankSpirit" width="20" height="18" border="0"> Une image<br>
et un <a href="#">lien</a></span></span>

L'expression déclenchant l'apparition du popup se voit attribuer le style "PopIt".

Le texte qui devra apparaître dans le popup se voit attribuer le style "hidden". Pour obtenir le résultat souhaité, il est impératif que le bloc "hidden" soit positionné dans et à la fin du bloc "PopIt".

Valid HTML 4.01 Transitional