L'art du Pop-Up

Maintenant que les pop-up sont stoppés par la plupart des navigateurs web, il peut être intéressant de continuer à infliger au surfeur qui s'aventure sur votre site, un message qui vient cacher le texte qu'il avait l'audace de lire sans rien demander à personne.

Comment ouvrir une animation Flash transparente par-dessus la page HTML ?

1. Exporter l'animation Flash en Window Mode : Transparent windowless

2.Dans la feuille de style, placer le Flash en positon absolue

Utiliser seulement le javascript et les CSS

1. Créer une DIV invisible :

- placer un div (je l'ai appelé pop-up) où vous voulez dans votre page html

- Dans la feuille de style CSS, il sera défini en position absolue :

#pop-up { position:absolute; top:70px; left:150px; width:550px; display:none; }

2. Placer le javascript dans le header de la page :

<script type="text/JavaScript"> function changeOpac(opacity, id) { var object = document.getElementById(id).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; } function display(calque) { document.getElementById(calque).style.display = "block"; changeOpac(30, 'global'); } function efface(calque) { document.getElementById(calque).style.display = "none"; changeOpac(100, 'global'); } </script>

3. Activer le div pop-up lors d'un clic :

<a href="#" onclick="display('pop-up')"></a>

4. Effacer le div pop-up en cliquant par exemple sur une croix placée en haut à droite :

<a href="#" class="croix" onclick="efface('pop-up')">X</a>

- dans la feuille de style :

a.croix { position:absolute; top:0; right:0; }

5. Résultat : en cliquant sur un lien, la vidéo s'affiche au premier-plan, le site s'assombrit en fond d'écran.

pop-up

Exemple

fleche Brasserie des Garrigues

en cliquant sur la vidéo