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