Logga in
 |
 |
|
| Prova att föra muspekaren över och klicka på menybilderna ovan! | OBS! Navigation Bar öppnar ett nytt fönster som visar exempel med fungerande knappar... | |
 |
|
|
 |
|
|
 |
|
|
 |
|
|
 |
|
|
En bild eller knapp som byts ut när muspekaren förs över bilden kallas ofta för "Rollover-bild". Funktionen utförs av ett javascript som byter ut bilden mot en annan, det krävs alltså minst två bilder för att utföra rollover-funktionen. Bilderna eller knapparna gör du själv och bäst resultat får du om de är exakt lika stora. Om det skiljer någon pixels storlek kan resultatet bli att bilden "hoppar till " när muspekaren förs över bilden. För att undvika det anpassar Dreamweaver de båda bildernas storlek till varandra vilket då istället kan ge ett förvrängt utseende.
Dreamweaver har två funktioner för rollover; "Rollover Image" (Överrullningsbild) och "Navigation Bar" (Navigationsfält) . Båda funktionerna skapar de nödvändiga javascripten åt dig. Bilder eller knappar gör du själv. I funktionen "Rollover Image" används två bilder och i "Navigation Bar" minst två upp till fyra bilder. I vårt exempel med fem knappar går det alltså åt 20 bilder!
Läs mer om hur du snabbt skapar många knappar i Photoshop
och spar dem i webformat i guiden Segment - Slices ».
Om inspirationen tillfälligt uteblir
kan du enkelt få snygga knappar i guiden Stilar
- Styles ».
Ett bra alternativ till att göra
egna knappar med rollover-funktion kan vara att använda Flashknappar »
Använd dina egna bilder och knappar eller spara ner bilderna som används i exemplet. Du hittar dem längst ned på sidan »
Placera textmarkören där du vill ha Rolloverbilden. Använd knappen "Rollover Image" (Överrullningsbild) i verktygsfältet "Common" (Vanlig) eller menyn "Insert/Interactive images/Rollover Image" (Infoga/Interaktiva bilder/Överrullningsbild):
I dialogrutan anger du vilken bild som ska visas innan muspekaren förs över bilden (Original Image) och vilken bild som ska vara "rolloverbild" (Rollover Image):
Image Name (Bildnamn) = identifierare till bild som krävs för javascriptet. Undvik ÅÄÖ och Versaler.
Alternate Text (Alternativ text) = ger attributet ALT till märket <IMAGE> och visar en "gul etikett" när muspekaren förs över en vanlig bild. Används tex till beskrivningar av bild eller länk.
Preload Rollover Image (Förhandsladda överrullningsbild) = Laddar ner bilderna i webbläsarens cacheminne så att de är redo när de ska användas. Risken är annars att en fördröjning sker då rolloverbilden ska laddas ner i samma ögonblick som muspekaren förs över bilden.
Rolloverbilden visas som en vanlig bild. I exemplet nedan är den placerad i en tabellcell:
Du kan inte se rollover-funktionen i Dreamweaver utan måste förgranska i webbläsare med knappen F12. Prova sedan att föra muspekaren över bilden!
Bilden är länkad som vanligt med <A HREF> men dessutom är javascriptet som utför funktionen placerad i koden:
...men det är mer kod än så som krävs för rollover-funktionen. Resten av javascriptet som Dreamweaver skapar är placerat inom <HEAD>. Exemplet nedan är bara en tredjedel av koden som skapats!
Javascript kallas i Dreamweaver även för "Behaviors" (Beteenden). Om du behöver ändra i din rolloverbild markerar du först bilden och väljer menyn "Behaviors" som finns i paletten "Design":
Dubbeklicka på valet "Swap Image" för att få dialogrutan där du kan göra eventuella ändringar:
Naturligtvis kan du även göra ändringarna direkt i koden. Kan vara tidskrävande men lärorikt!
En mer avancerad form av rolloverbilder får du med funktionen "Navigation Bar" (Navigationsfält). Den kan ha fyra visningslägen av bilderna (kräver då också att du har fyra knappar eller bilder):
När du använder funktionen "Navigation Bar" behöver du inte utnyttja alla fyra lägena. Du kan nöja dig med "Up" och "Over" som ger samma effekt som funktionen "Rollover Image" ovan.
Använd dina egna bilder och knappar eller spara ner bilderna som används i exemplet. Du hittar dem längst ned på sidan »
Placera textmarkören där du vill ha Rolloverbilden. Använd knappen "Navigation Bar" (Navigationsfält) i verktygsfältet "Common" (Vanlig) eller menyn "Insert/Interactive images/Navigation Bar" (Infoga/Interaktiva bilder/Navigationsfält):
OBS! Till skillnad från funktionen "Rollover Image" ovan anger du här alla menyval med bilder och länkar innan du går ur dialogrutan. Om inte alla sidor du ska länka till existerar ännu och du inte kan ange länkar dit kommer Dreamweaver automatiskt att ange sk "null-länkar" i form av en brädgård #. Du får absolut inte ta bort det tecknet förrän du kan ange den riktiga länken eftersom javascriptet som utför funktionen då försvinner.
Lägg till det första menyalternativet:
...använd Plus-tecknet för att lägga till övriga menyalternativ:
Nav Bar Elements (Element i navigationsfältet) = Ange namnet för menyvalet i rutan "Element Name". Använd "Plus-tecknet" för att lägga till de övriga menyalternativen när du angivit alla egenskaperna nedan.
Element Name (Elementnamn) = identifierare till bild som krävs för javascriptet. Undvik ÅÄÖ och Versaler.
Up Image (Upp-bild) = Ursprungsbilden som visas från början och även när muspekaren lämnar bilden.
Over Image (Över-bild) = Visas när muspekaren förs över ursprungsbilden.
Down Image (Ned-bild) = Visas när klickning på ursprungsbilden har skett.
Over While Down Image (Över ned-bild) = Visas när muspekaren förs över bilden och den länkade sidan redan visas. Indikerar att menyvalet redan är aktivt.
Alternate text (Alternativ text) = ger attributet ALT till märket <IMAGE> och visar en "gul etikett" när muspekaren förs över en vanlig bild. Används tex till beskrivningar av bild eller länk.
When Clicked, Go To URL (Vid klickning, gå till URL) = Sökvägen till den länkade sidan.
Preload Images (Förhandsladda bilder) = Laddar ner bilderna i webbläsarens cacheminne så att de är redo när de ska användas. Risken är annars att en fördröjning sker då rolloverbilden ska laddas ner i samma ögonblick som muspekaren förs över bilden.
Show "Down Image" Initially (Visa "ned-bild" från början) = Anges om du vill visa att menyvalet leder till den aktuella sidan. Används tex när menyerna finns på varje sida för att visa vilken sida som är aktiv.
Insert Vertically/Horizontally (Infoga Vågrätt/Lodrätt) = Välj om menybilderna ska läggas sida vid sida eller under varandra.
Use Table (Använd tabeller) = Bilderna placeras i egna tabellceller.
I exemplet nedan är Rollover-bilderna placerade i en Tabell. Avståndet mellan knapparna är inte angivet ännu:
...avståndet mellan knapparna i en Tabell anger du med cellutfyllnad, cellmellanrum eller radhöjd:
Du kan bara ha en Navigation Bar på sidan. Om du försöker lägga till en Navigation Bar visar Dreamweaver information om att du kan redigera men inte lägga till ytterligare en:
För att ändra i funktionen Navigation Bar markerar du först bilden och dubbelklickar sedan på en "Action" i menyn "Behaviors" (Beteenden):
...dialogrutan där du kan göra dina ändringar visas:
Om du vill använda samma meny på varje HTML-sida kan du kopiera hela Navigation Bar då även javascriptet följer med. Ändra eventuellt sökvägarna till bilder och dokument.
Högerklicka på de bilder du vill ha och spara dem:
Up Image:
Over Image:
Down Image:
Over While Down Image:
skriv ut »