Ett litet galleri som använder åtgärden (Behavior) Show-Hide Layers. Använd menyn till vänster för att välja bland bilder och information. Tips! Klicka på bilden som visas så får du lite extra information...
| Ålandsbåt som inte längre är i trafik... skeppet Pommern ligger numera för ankar i Ålands hamn och är ett museum. |
| I havet får det plats en massa ungar :-) |
| Svarta får ...förlåt, hundar! Samma färg men olika ras men varför bry sig? |
| I en bassäng får det inte plats lika många ungar... |
| Åt vilket håll blåser vinden idag? |
| Samma boll som Ockelbo Basket använder? |
| Ett äpple om dagen håller doktorn borta. |
| Vem kunde tro att dom fötterna skulle bli så stora senare... |
Ålandsbåt » |
Med hjälp av javascript gör du websidorna mer dynamiska och interaktiva. Javascripten utför vissa uppgifter och kan aktiveras på olika sätt. Vanligt är att de aktiveras automatiskt när sidan laddas i webläsaren eller genom klickning på en text eller objekt. Javascripten utförs av webläsaren och har begränsat stöd i vissa äldre webläsare. Dreamweaver MX har ett tjugotal färdiga javascript som är anpassade för att passa de flesta webläsare och fler script finns att hämta på Macromedia Exchange ».
I det här exemplet används Behaviors (javascript) för att visa eller dölja Lager (Läs mer om Lager i övningen "Lager - Layers" »). Åtgärden Show-Hide Layer (Visa-dölj skikt) kan användas till att visa information när besökaren för muspekaren över en bild eller annat objekt.
I det här exemplet används Show-Hide Layer för att att visa ett Lager vid klickning eller när muspekaren förs över en länkad text. (Läs mer om Lager i övningen "Lager - Layers" »)
En vanlig metod när javascript ska kopplas till områden
eller text som ska ha "länkegenskaper" är
att använda en "brädgård" ( #
) som länkmål. Länken leder då ingenstans
men får egenskaperna för ett länkat område:
Nackdelen med metoden ovan är att många webläsare
bläddrar till websidans topp. En alternativ
metod är att istället ange javascript:;
(OBS! både kolon och semikolon) som länk:
TIPS! Om du vill att den länkade
texten inte ska ha det typiska länkutseendet, understruken
och blå kan du använda CSS för att formatera
<A HREF>. I kodvyn kan du lägga till style="text-decoration:none;
color:black" inom <A REF>:
Testa i webläsaren med F12!
Du även kan även se exemplet här »
Kolla din kod. Utlösaren (Trigger) för javascriptet är kopplat till länken <A HREF>:
Själva javascriptet (Behavior) som utför åtgärden är betydligt längre och är placerat inom <HEAD>:
Den funktion som startar javascriptet kallas för Utlösare (Trigger). Beroende på vilka versioner av webläsare du valt kan du välja mellan ett antal olika utlösare.
Markera det objekt eller text som är kopplat till en Behavior och välj "pilmenyn" i "Behaviors" (Beteenden). De händelser som kan starta javascriptet visas i listan:
Du kan välja händelser för Muspekare eller Tangenttryckning. Generellt gäller att det finns flera lägen i en Mushändelse:
Muspekaren flyttas över ett område och lämnar sedan området; onMouseOver och onMouseOut.
Användaren klickar med Muspekaren håller intryckt och släpper sedan knappen; onClick, onMouseDown och onMouseUp (eller dubbelklickar; onDblClick).
Liknande egenskaper har Tangenttryckningar; onKeydown, onKeyPress och onKeyUp.
När Lagret visas efter en åtgärd vill man ofta dölja det igen. Du kan alltså lägga flera utlösare (triggers) till samma javascript. I exemplet nedan visas Lagret när musknappen hålls intryckt och döljs när knappen släpps upp:
Här är utlösaren ändrad så att Lagret visas när muspekaren förs över länkat område och dölj när pekaren lämnar området:
skriv ut»