Bonjour et bienvenue dans ce tutoriel au cours
duquel je vais vous apprendre les différentes manière d'ouvrir une pop-up grâce à du JavaScript.
(Utilisable sans aucun problème sur des pages ayant comme extension .html)
Je tiens cependant à vous dire que l'usage des pop-up est autant que possible à éviter.
En effet, les navigateurs récents les bloquent de plus en plus efficacement
(en raison de l'usage qu'en faisaient les régies publicitaires)
et il serait donc bête de mettre une information importante dans une pop-up
et que vos membres ratent cette information à cause du blocage qu'effectue leur navigateur.
Pour commencer, il vous faut insérer ce script entre les balises <head> et </head>:
<script language="JavaScript">
function OuvrirPop(url,nom,haut,Gauche,largeur,hauteur,options) {
ouvpop=window.open(url,nom,"top="+haut+",left="+Gauche+",width="+largeur+", height="+hauteur+","+options);
}
</script>
Vous n'aurez rien à modifier dans ce code. Celui-ci définit juste les actions de la fonction OuvrirPop que l'on utilisera plus tard ainsi que les arguments que celle-ci va utiliser.
Voici les trois ouverture de pop-up que nous allons voir dans ce tutoriel:
-Au chargement de la page.
- A partir d'un lien.
- A partir d'un bouton.
Je vais donc vous montrer chacune de ces méthodes.
- Au chargement de la page.
Pour ouvrir une pop-up au chargement de la page, il vous faut insérer le script suivant à l'intérieur de la balise body:
onLoad='OuvrirPop("url","nom",haut,gauche,largeur,hauteur,"options")'
Ce qui donne par exemple:
<body onLoad='OuvrirPop("http://nicocreas.olympe-network.com","Nico Créa's",0,0,800,600, "menubar=no,scrollbars=yes" )' >
Une description des options et réglages est faites plus bas.
- A partir d'un lien ou d'une image.
Pour ouvrir une pop-up en cliquant sur un lien (ou une image) il vous faut insérer ce code à l'endroit où vous souhaitez dans votre page:
<a href='javascript:OuvrirPop("url","nom",haut,gauche,largeur,hauteur,"options")'> lien ou image</a>
Voici un exemple de lien:
<a href='javascript:OuvrirPop("http://nicocreas.olympe-network.com","Nico Créa·s",0,0,800,600, "menubar=no,scrollbars=yes" )' >Nico Créa's</a>
Ce qui nous donne: Nico Créa's
Pour l'image, le code est le même sauf que vous mettez le lien sur une image plutôt que sur un texte. Comme précédemment, les options et réglages seront expliqués plus bas.
- A partir d'un bouton.
La encore, ce n'est pas bien compliqué :-)
Pour ouvrir une pop-up en cliquant sur un bouton,
il vous faut insérer ce code à l'endroit où vous souhaitez dans votre page:
<form>
<input type='button' value='Ouverture Pop Up' onClick='OuvrirPop("url","nom",haut,gauche,largeur,hauteur,"options")'>
</form>
Ce qui donnerais pas exemple:
<form>
<input type='button' value='Nico Créa·s' onClick='OuvrirPop("http://nicocreas.olympe-network.com","'Nico Créa·s",0,0,800,600, "menubar=no,scrollbars=yes" )'>
</form>
Ce qui nous donne:
Voilà, vous savez maintenant ouvrir de trois façon différentes une pop-up. Il nous reste maintenant à voir les deux derniers chapitres de ce tutoriel, les arguments et les options. En route, donc, vers l'avant dernier chapitre.
- Les arguments.
Bien, nous allons donc voir pour commencer les différentes arguments qu'il vous faut donner à chaque fois à la fonction JavaScript pour qu'elle sache quoi faire. Pour cela rien de mieux qu'une liste explicative. :P Bon, c'est partit.
- url: remplacer ces trois petites lettre par le liens qui va être chargé dans la pop-up qui va être ouverte.
- nom: vous donnez ici un nom à la fenêtre qui va souvrir. En général, on nomme simplement ce qui va apparaître ou l'on donne le nom du site chargé.
- haut: la distance à laquelle va se positionner votre pop-up par rapport au haut de l'écran. (en pixels)
- gauche: idem, mais par rapport à la gauche de l'écran.
- largeur: vous définirez ici la largeur en pixels que va mesurer votre pop-up.
- hauteur: vous définirez ici la hauteur en pixels que va mesurer votre pop-up.
- options: voir prochain chapitre.
L'intermède sur les arguments fût court, mais ne nécéssitant pas une longueur accrue nous nous arrêterons à ces quelques explications. Nous passons donc maintenant au dernier chapitre, les options.
- Les options.
Les deux utilisées ici:
- menubar: afficher où non la barre avec Fichier, Edition etc (yes/no)
- scrollbars: afficher où non les barres de défilement verticales et horizontales. (yes/no)
Mais il y en a d'autres comme par exemple:
- resizable: donner où non le droit à l'utilisateur d'agrandir/rétrécir la fenêtre. (yes/no)
- toolbar: afficher où non la barre d'outil. (yes/no)
- location: afficher où non la barre d'adresse. (yes/no)
- directories: afficher où non les boutons d'accès rapide. (yes/no)
Pour mettre plusieurs options, il vous suffit de mettre une virgule entre chacunes d'entre elles. Attention toutefois, vous devez rester entre les deux ' sinon l'option ne sera pas prise en compte et cela pourait entrainer une erreur.
Remarque: on peut aussi utiliser 1 et 0 en lieu et place de yes et no.
---------------------------------------------------------------------------
Et bien voilà, ce tutoriel touche à sa fin, j'espère que vous l'aurez compris,
si tel n'était pas le cas, je me tiens évidemment à votre disposition sur le forum
pour répondre à vos questions. Il ne me reste plus qu'à vous dire à bientôt sur
un nouveau tutoriel. Cordialement, Nico57130.