Behaviours.

Met behaviours kun je in DW allerlei functionaliteit genereren.
Ze bestaan uit twee te definieren elementen, een action - wat er moet gebeuren - en een event - wanneer het moet gebeuren.
Actions zijn in feite voorgedefinieerde javascripts (programmaatjes), die aan een html-tag gehangen worden en een gebeurtenis in gang zetten, bijvoorbeeld het wisselen van een afbeelding of het verschijnen van een popUp message.

Om een behaviour te definieren, selecteer je het betreffende element en geef je het in de properties-inspector eerst een unieke naam (deze naam mag geen spaties en geen leestekens bevatten en mag niet beginnen met een cijfer).
Vervolgens open je het behaviours-panel, klikt op het plus-teken en selecteert in het menu dat verschijnt de action naar keuze. Deze action wordt vervolgens weergegeven in het panel, met ernaast een event. Dit event kun je veranderen door, na het te selecteren, op het pijltje (naarwaarts driehoekje) ernaast te klikken en een keuze te maken uit de lijst die dan verschijnt.
Elk element, oftewel elke html-tag, kent zijn eigen events, wat weerspiegeld wordt in de beschikbare keuzes in de action- en eventlijst.

Je moet vantevoren goed bedenken welke actions je wilt definieren. Als je te vaak actions weghaalt en opnieuw definieert, kan de code namelijk vervuild raken en niet meer goed werken.

Voor het selecteren van elementen is de tag-selector hier erg handig.

Actions werken niet in het DW-documentvenster zelf. Je zult ze dus moeten testen in je browser.

Een Swap Image definieer je als volgt:

• Plaats een afbeelding in je document-venster.
• Geef de afbeelding een unieke naam in de properties-inspector.
• Hou de afbeelding geselecteerd, open het behaviours-panel en klik op het plusteken. Je ziet nu alle behaviours die voor dit element gebruikt kunnen worden.
• Selecteer de optie Swap Image.
• Geef in het dialoogvenster dat verschijnt aan met welke afbeelding het plaatje moet 'swappen'. Deze afbeelding moet je van te voren uiteraard gemaakt hebben en geplaatst hebben in je root-folder. Het is uiteraard het handigste, deze afbeelding dezelfde afmetingen te geven als het originele plaatje.
  Verder kun je aangeven of de originele afbeelding weer terug moet komen als de gebruiker weer van het plaatje af muist (image restore) en of je wilt dat het swap-image ge-preload wordt (= aan te raden).
  
  Dit preloaden van afbeeldingen houdt in, dat de afbeeldingen waarmee 'geswapt' wordt, die dus aanvankelijk, bij het binnenkomen van de pagina, niet te zien zijn, wel meteen bij het binnenkomen van de pagina geladen worden. Ze worden dan dus niet pas geladen als de gebruiker daadwerkelijk de 'swap-image action' activeert, door over de originele afbeelding te muizen.
  Als de afbeelding wel nog geladen moet worden als de gebruiker de action activeert, dan kan dat betekenen dat het even duurt voordat de swap-image te zien is! Dit wil je waarschijnlijk niet, de wisseling moet juist vlotjes verlopen!

De Swap Image: Beweeg met je muis over de afbeelding en er verschijnt een andere afbeelding.

Behaviours die geactiveerd worden door een muis-gerelateerde Event, kunnen alleen gedefinieerd worden op elementen die een hyperlink hebben.
Als je een behaviour wilt definieren op een stuk tekst zonder dat je daarop een echte link wilt maken, kun je een zgn. nowhere-link maken, door in het properties-panel link van het betreffende element (de geselecteerde tekst) een # te typen.

Dit is anders bij een afbeelding.
Als je aan een afbeelding een behaviour wilt hangen, moet je hem selecteren en weer eerst een naam geven. Dan kies je uit de lijst de gewenste action. Dreamweaver maakt nu automatisch een nowhere-link op dat element (die ziet er zo uit: javascript:;)
Je moet vervolgens de event aanpassen; voor dit soort elementen moet je een van de events in de lijst kiezen die tussen haakjes staan. Dit doe je door te klikken op het driehoekje naast het event; er opent een lijst met alle mogelijke events voor dit element. Onderaan die lijst vind je de opties tussen haakjes.

Hierop is een openBrowserWindow-action gedefinieerd voor het event onClick.

Je kunt ook actions hangen aan de body-tag. Het event dat hierbij hoort is onLoad of onUnload.
Bij onLoad wordt de actie uitgevoerd als het document helemaal in de browser geladen is, bij onUnload als het venster of de browser gesloten wordt.
Een voorbeeld van een aan de body gekoppelde action (in dit geval het verschijnen van een pop-up message) met het event onLoad, zag je toen deze pagina in je browser verscheen.

Als je deze pagina meerder malen ophaalt (probeer maar eens met de refresh-knop van de browser), zie je meteen waarom het gebruik van popUp Messages alleen gebruikt moeten worden als het functioneel is. Onnodige popUps kunnen behoorlijk irritant zijn voor de gebruiker!
Zo raad ik je aan ook niet te scheutig zijn met het gebruiken van geluid. Niet iedereen heeft zin om naar jouw muziekje te luisteren op het moment dat ze je pagina op het web bezoeken.
Je kunt mensen daarom beter de keuze geven, door bv een knop te maken waarmee ze het geluid aan en uit kunnen zetten. Dit kun je dan weer doen met een playSound-action die je op de knop definieert (met als event onClick).

terug naar boven

home