Lien (ouvre pop1) - Lien (ouvre pop2)

Des "popups" accessibles !

En survolant les liens, vous ouvrez une boîte de contenu au-dessus du document, sans ouvrir de nouvelle fenêtre. Elle est donc affichée même avec les navigateurs qui interdisent les popups.

Cette boite peut contenir n'importe quel contenu (images, textes, tableaux, etc.) et peut adopter n'importe quelles dimension, couleurs ou position.

Attention, ce contenu doit rester léger, car contrairement aux vraies popups, il est chargé en même temps que la page.

Les boîtes sont affichées/masquées grâce à un script JavaScript placé hors du document. Lorsque JavaScript est désactivé, le contenu de la boîte apparait proprement en dessous du contenu de la page.

Partie JavaScript (fichier popup2.js) :

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

function ctrl(e)
{
de=!D.documentElement.clientWidth?D.body:D.documentElement // IE6
sx=gk?pageXOffset:de.scrollLeft //scroll h
sy=gk?pageYOffset:de.scrollTop //scroll v
x=gk?e.pageX:event.clientX+sx; //curseur x
y=gk?e.pageY:event.clientY+sy; //curseur y
el=gk?e.target:event.srcElement;
if(!el.tagName)el=el.parentNode; // noeud #text
if(el.className == 'pop')
  {
  popup = D.getElementById(el.href.substring(el.href.lastIndexOf('#') + 1)).style; 
  if(popup!=encours) // seulement si changement  
    {
    encours.display='none';
    with(popup){display="block";left=x+'px';top=y+10+'px';}
    encours=popup;
    }
  } else {encours.display='none';encours=0}
}

D.onmousemove=ctrl
// charge la feuille de style des popups.
D.write('')

Feuille de style (fichier popup.css) :

#pop1, #pop2 {
position: absolute;
display:none;
width: 20em;
border: 3px double black;
background: #f5f5dc;
z-index: 500;
font-size: 80%;
}
#pop1 p, #pop2 p {
margin: 0 0.3em;
}
#pop1 h1, #pop2 h1 {
font-size: 110%;
margin: 0 0 0.5em 0;
border-bottom: 1px solid black;
background: white url(top.gif) left top repeat-x;
color: black;
text-align: center;
}

Popup !

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in mauris vel ipsum viverra tincidunt.

venenatis et, elementum et, sapien. Donec nonummy. Vestibulum condimentum

sit amet consectetuer dolor magna ac ante. Pellentesque consequat.

Retour au tutoriel.