docCranach (popup)
download 
Plainte Transcription
Cranach (popup)
Comment créer un popup
(C’est-à-dire, une fenêtre qui s’ouvre à la dimension voulue sur votre page web
lorsque l’on clique sur un lien) ?
Pour cela, il faut utiliser un logiciel éditeur htm (ou html) comme Dreamweaver et
insérer un code javascript.
1. Créer un sous-dossier dans artsplastiques de votre bureau et nommez le
comme votre projet (ex: je_me_presente).
Placez-y toutes les images que vous utiliserez pour votre projet. Vous
enregistrerez également le fichier créé avec
Dreamweaver.
2. Télécharger Dreamweaver2 et le n° de licence sur
3.
4.
Docs/dc/arts_plastiques/Mme Dupré/logiciels
Installer le logiciel
Ouvrir Dreamweaver2 et enregistrer sous je_me_presente ce document
SansTitre sous le nom de index
En vérifiant, vous devez voir apparaître cette icône
dossier je_me_presente
fdupré -nov2005 - page1
dans votre
5. Dans le lanceur, cliquer sur HTML
Une fenêtre s’ouvre et vous présente ce que l’on appelle le code source
html :
à La page est structurée par des balises qui commencent par <> et se
ferment par </> et strictement dans cet ordre:
<html>
<head>
<title> </title>
</head>
<body> </body>
</html>
Nous allons maintenant insérer le code javascript dans le code source de
cette page. Ce qui aura pour effet de faire apparaître l’image et les
événements associés à celle-ci.
fdupré -nov2005 - page 2
A/ Méthode « à l’arrache » : on se contente de coller une formule (dite
javascript) dans le code source de la page
En insérant le code javascript nous créons un évènement sur la page : au
passage de la souris sur la zone des yeux et des mains et en cliquant, une
fenêtre s’ouvre sur la photo du détail.
1. Insertion du code ( cliquer ici pour ouvrir le fichier script.txt
afin de copier ce qui suit facilement)
•
Copier et coller le texte ci-dessous entre les balises <head>
et </head> sans rien modifier.
<script language="Javascript">
<!-- function ouvreFenetre(page, largeur, hauteur) {
window.open(page, "",
"scrollbars=no,menubar=no,toolbar=no,resizable=no,width=" + largeur +
",height=" +
hauteur);
}
// -->
</script>
•
Copier et coller ce texte entre les balises <body> et
</body>
<td width="110" height="85">
<img src="/popup/votre_image.jpg" alt="nom_de_votre_image"
border="0" usemap="#Map"> <map name="Map">
<area shape="rect" coords="219,171,340,212" href =
"javascript:ouvreFenetre('image_detail_qui_doit_s_ouvrir.jpg’, 300,
200)">
<area shape="rect" coords="205,612,342,716" href =
"javascript:ouvreFenetre('autre_image_qui_doit_s_ouvrir.jpg', 300,
300)">
</map>
</tr>
</table>
•
Ne modifier que les parties en rouge et en vert :
•
Les termes en bleu correspondent au nom de votre image sur
laquelle vous tracerez la carte.
•
Les termes en rouge correspondent à l’image vers laquelle le
lien pointe.
•
Les termes en vert correspondent aux dimensions en pixel de cette
image. Elles déterminent la grandeur de la fenêtre popup
<area shape="rect" coords="219,171,340,212" indique qu’il s’agit
d’une zone d’une carte de lien sur l’image
fdupré -nov2005 - page 3
•
Ne modifier que les parties en rouge et en vert :
•
Les termes en bleu correspondent au nom de votre image sur
laquelle vous tracerez la carte.
•
Les termes en rouge correspondent à l’image vers laquelle le
lien pointe.
•
Les termes en vert correspondent aux dimensions en pixel de cette
image. Elles déterminent la grandeur de la fenêtre popup
<area shape="rect" coords="219,171,340,212" indique qu’il s’agit
d’une zone d’une carte de lien sur l’image
href = "javascript:ouvreFenetre('image_detail_qui_doit_s_ouvrir.jpg',
300, 200)"> indique que la zone de la carte est en lien avec
l'image_detail_qui_doit_s_ouvrir.jpg
2. Visualisation de l’effet produit :
Cliquer sur F12 de votre clavier pour visualiser votre page dans le
navigateur Explorer
et modifier les chiffres en vert si nécessaire.
fdupré -nov2005 - page 4
3. En ré ouvrant le code source dans Dreamweaver, on
peut repérer et comprendre les différentes données
programmées sur cette page.
fdupré -nov2005 - page 5
B/ Méthode « pro » : on trace une carte sur l’image on rajoute le code javascript.
1.
2.
3.
4.
Cliquer sur l’image
Cliquer sur le bouton carte dans la fenêtre des propriétés.
Sélectionner le £, puis tracer un rectangle sur la zone à relier.
Faire parcourir pour afficher la page html choisie. (ici, yeux.htm)
5. Revenir dans le code html et modifier le nouveau en rajoutant le code javascript,
c’est à dire:
que vous devez terminer en lisant ceci :
href = "javascript:ouvreFenetre('page_qui_doit_s_ouvrir.htm’, 300, 200)"
et non plus ceci : href="page_qui_doit_s_ouvrir.htm)"
FDupré - nov 2005
