doc01 Création d`une pop up - Laurent Clercq-Roques
download 
Plainte Transcription
01 Création d`une pop up - Laurent Clercq-Roques
Médias numériques
01 Création d'une pop up
Soumis par Administrator
20-12-2007
Dernière mise à jour : 21-12-2007
Nous allons aborder dans ce pas à pas la méthode commander l'ouverture d'une fenêtre intruse ou surgissante (pop
up) dans une page HTML.
ÉTAPE 1 CRÉATION DES PAGES HTML.
Nous allons avoir besoin de trois pages html. La première nommée "index.html" sera la page qui appellera les fenêtres
pop up que l'on nommera "pop1.html" et "pop2.html". C'est cette page qui sera chargée d'ouvrir les fenêtres.
ÉTAPE 2 : CRÉER LE SCRIPT POUR L'OUVERTURE DE LA POP UP.
L'ouverture d'une fenêtre "pop up" se fait grâce une commande javascript. C'est dans la page "index.html" que sera
placé le script javascript charger d'ouvrir la fenêtre "pop.html". Si ce n'est pas encore fait créez le document HTML
"index.html".
1 - Dans la partie <HEAD> de la page "index.html" que vous placerez le script que vous recopierez dans la fenêtre cidesous.
ÉTAPE 3 : ÉTUDE DU SCRIPT JAVASCRIPT.
Le script est composé d'une fonction nommée "popUp". Cette fonction reçoit deux paramètres "page" et "titre" qui sont
utilisés par la suite comme paramètres de la commande javascript "window.open". le paramètre page permet d'utiliser la
fonction javascript pour ouvrir différents documents html dans la fenêtre pop up. La paramètre "titre" lui permet
d'attribuer un nom à la fenêtre qui s'ouvrira.
Par exemple pour ouvrir une document "pop1.html" avec pour titre de fenêtre "ma pop 1", on utilisera la commande
javascript suivante :
popUp("pop1.html", "ma pop 1");
ÉTAPE 4 : CRÉER UN LIEN POUR OUVRIR LA POP UP.
1 - Toujours dans la page "index.html", mais dans la partie <BODY> du document créez le lien en recopiant le script sidessous.
2 - Enregistre le document "index.html".
ÉTAPE 5 ; CRÉATION DES PAGES HTML DES POP UP.
Si vous n'avez pas encore fait créez les deux autres documents HTML "pop1.html" et "pop2.html".
1 - Dans le premier vous modifierez la balise body pour lui ajouter l'attribut bgcolor="#33CCCC". Dans l'autre
bgcolor="#CC9900". Ceci est le moyen le plus simple pour différencier les deux documents html.
2 - Enregistrez les documents.
http://laurent.clercqroques.free.fr/joomla
Propulsé par Joomla!
Généré: 20 February, 2017, 11:56
Médias numériques
ÉTAPE 6 : TESTEZ L'OUVERTURE DE LA POP UP.
1 - Ouvrez le document "index.html" dans un navigateur et cliquez sur le lien hypertexte ici que vous avez dans la page.
La fenêtre popUp "pop1.html" s'ouvre avec la couleur de fond que vous avez défini à l'étape précédente.
2 - Pour ouvrir la deuxième fenêtre popUp, éditez à nouveau le document "index.html" et dupliquez le lien hypertexte
que vous avez crée dans la partie <BODY> de la page HTML. Modifiez le paramètre de la fonction pour changer
"pop1.html" en "pop2.html". Tester a nouveau le document dans un navigateur : vous avez maintenant deux liens
hypertexte que vous pouvez tester.
http://laurent.clercqroques.free.fr/joomla
Propulsé par Joomla!
Généré: 20 February, 2017, 11:56
