Créez votre site avec honolulu...
Apprendre le html
Cours de javascript
Apprendre les CSS

Créer des popups avec Javascript  






Les pop-ups sont des fenêtres secondaires qui s'ouvrent à l'intérieur même de la fenêtre principale. Une pop-up peut charger une page HTML mais aussi tout simplement une image...

Leur avantage comparé à un lien ordinaire tient au fait que l'on peut les paramétrer à loisir : dimensions, moment du chargement, chargement aléatoire...

Un exemple de pop-up

La fonction appelée :


function ouvre()
{
window.open('golf.jpg','fenetre','width=650,height=500');
}

** La syntaxe minimum pour ouvrir une pop-up :

window.open('page.html','nom_fenêtre', 'width=largeur,height=hauteur');

** La syntaxe "académique", plus lourde :


window.open('page.html','nom_fenêtre', 'width=larg,height=haut,toolbar=x,location=x,directories=x,
menuBar=x,scrollbars=x,resizable=x');

où "x" peut prendre la valeur positive "yes" ou "1" ou négative "no" ou "0".
Une pop-up "académique"

Vous pouvez donner un nom à votre pop-up et agir sur elle comme Javascript agirait avec n'importe quel autre objet...

Il suffit pour cela d'attribuer un nom à votre pop-up :

corail=window.open('golf.jpg','fenetre','width=150,height=120');



Code :

<input type="button" value="Ouvrir" onclick="ouvre()">
<input type="button" value="Fermer" onclick="corail.close()">

** La pop-up s'ouvre par défaut en haut et à gauche... Vous pouvez changer cela en spécifiant les paramètres suivants : "top" et "left", ce qui donne :


Code :

window.open('golf.jpg','fenetre','width=150,height=120,top=400,left=400')

** Les pop-ups aléatoires ne sont rien de plus que des chargements de pop-ups dépendant de paramètres fixés par vous : vous pouvez décider de charger telle ou telle fenêtre selon le hasard, la date, l'heure, le temps qu'il fait (je plaisante :o)

Le plus simple pour gérer ces conditions d'ouverture, ce sont nos fameux arrays...
L'exemple qui suit va charger aléatoirement une pop-up sur les quatre que compte l'Array :

nb : les pop-ups chargent ici des images mais il va de même pour des pages HTML... Pour vérifier qu'il s'agit bien de pop-ups aléatoires, il faut tester le code plusieurs fois et ne pas oublier de refermer la pop-up avant de refaire le test :o)


Le code que j'ai utilisé ici pour ouvrir des pop-ups aléatoires :


<script>
var pop=new Array("golf.gif","pausecafe.gif","thedice.gif","doublefete.gif")
function nesépa(){
var numero=Math.floor(Math.random()*4);
surprise=window.open(pop[numero],'ouvert','width=150,height=120,left=300');
}
</script>


A bientôt...