Comportements dans dreamweaver cs5

Transcription

Comportements dans dreamweaver cs5
Comportements
dans dreamweaver cs5
MC Benveniste
©2013
Comportements : définitions
Dans Dreamweaver tout se qui est fait en javascript se trouve dans la fenêtre des comportements
Attention en utilisant cette fenêtre il faut s’assurer que le bon objet sera sélectionné dans la page
html.
En effet, une action sera déclenchée sur un clic ou un passage de la souris, ou à l’ouverture de la
page selon la balise que vous aurez sélectionnée avant de choisir le comportement
Pour une action sur “onclick”, “onmouseover” et “onmouseout”,
il faudra une balise <a> ou <area>
Pour une action au chargement de la page (déconseillé pour les
pop ups) il faudrait sélectionner la balise <body>
Un pop up est une page html qui s’ouvre dans une fenêtre à des dimensions données.
Il n’est pas possible en html de donner des dimensions à la fenêtre.
Il faut donc faire appel au javascript
Il faut donc d’abord préparer la page html qui s’affichera dans la petite fenêtre !
Comportements - pop up
Ouvrir la fenêtre du navigateur (pop up)
en cliquant sur un mot, une image ou une zone cliquable d’image
Ouvrir la fenêtre du navigateur (pop up)
en cliquant sur un mot, une image ou une zone cliquable d’image
Choisir dans votre page html l’objet qui va déclencher l’action. Il
faut que ce soit un lien, donc le transformer en “faux” lien avec
un # par exemple.
Ci-contre c’est la première photo qui est l’objet qui va
déclencher l’action
Assurez-vous que vous avez bien sélectionné la balise <a>
dans l’inspecteur des propriétés
Allez dans la fenêtre “comportements”
Cliquez sur le +
Choisissez “ouvrir la
fenêtre
du navigateur
Comportements - pop up
Une fenêtre de dialogue apparaît
Remplissez les champs
Si vous souhaitez un
redimensionnement
possible par l’internaute
et un ascenseur si nécessaire
Vous devez voir dans la fenêtre des comportements :
Comportements - permuter une image
Dans la page html afficher une grande image et les vignettes
Identifier l’endroit de l’image à permuter
sélectionner l’image à permuter ET l’identifier dans les propriétés
Cliquer sur la vignette, la transformer en faux lien (avec un #)
sélectionner la balise <a>
Aller dans la fenêtre des comportements
sélectionner l’image identifiée préalablement
parcourir pour chercher la grande image à afficher
dans la fenêtre des comportements
cliquer sur la flèche
faire dérouler
choisir on click
recommencer à partir des autres vignettes