Å lage en imagemap rollover (side 411 - 420 i Dreamweaver 3 Bible )
Som med vanlige rollover-knapper trenger vi to bilder. Et som viser "normal
status" og et som viser "over status".
Finn et bilde, lagre dette bildet i image-mappen.
Bruk Photoshop, marker områder i bildet og gjør om på f.eks
farger ved å legge inn hue/saturation-adjustment layers, husk å
krysse av colorize før du gjør fargeforandringer.
Lagre for web, legg dette bildet også i image-mappen.
Tilbake i Dreamweaver
Denne teknikken bruker tre forskjellige layer-properties: absolute positioning,
visibility og clipping.
Ideen er å bare vise deler av bildet ved et onMouseover-event. For å
få til dette trenger vi ett layer for hver hotspot i imagemap'en. Så
vil hvert layer bli "clipped" for bare å vise den hotspot'en.
Det fine ved dette er at vi bare trenger to bilder for mange hotspots.
Kakeoppskrift:
1. Lag et layer (offlayer)
2. Legg inn "normal status" bildet i layeret.
3. Lag et nytt layer (overlayer1)
4. Legg inn "over status" bildet i layeret.
5. I layers-paletten gi hvert av de to lagene et unikt navn
6. Pass på at "prevent overlaps" ikke er avkrysset.
7. Plasser de to layerne nøyaktig likt over hverandre
(Bruk Properties Inspector til dette)
8. Pass på at "offlayer" er synlig (øye som ser i Layer-palette)
9. Pass på at "overlayer" er usynlig (lukket øye i
Layer-palette)
10. Lag så et nytt layer (overlayer2, overlayer3...) for hvert av hotspot'ene
du har i bildet, legg inn
"over status" bildet i alle disse lagene. Alle disse lagene må
ligge nøyaktig likt de to andre lagene (properties inspector), og være
usynlige (Layers-palette).
Nå har du altså en bunke med identiske lag liggende oppå hverandre. Det nederste laget inneholder "normal status"-bildet, de overliggende inneholder "over-status"-bildet.
Nå skal vi lage hotspots'ene i bildene:
11.Velg det nederste layeret som inneholder "normal status" bildet.
12. Klikk på selve bildet.
13. I Map Name-feltet legger du inn et navn
14. Med Hotspots-verktøyene lager du felt i bildet for å lage
linker.
15. Legg inn URL, tekst i ALT-feltet og Target.
Normalt når man lager imagemaps er det her vi stopper, men vi skal altså lenger.
16. Kopier navnet du ga imagemap'en i Map Name-feltet.
17. I hvert av bildene i de andre lagene limer du inn imagemap-navnet i Map
Name-feltet. (Bruk Layers-palette for å få tak i de forskjellige
lagene, klikk i selve bildet og lim inn navnet i Properties Inspector)
Nå skal vi legge til en "behavior" som kalles Show/Hide Layers.
18. Pass på at "offlayer1" er synlig, og at alle de andre
layerne er usynlige
19. Velg den første hotspot'en
20. Hvis ikke Behaviors-paletten er åpne, åpne den fra Window
> Behavior
21. Fra Browser Option-listen velger du "4.0 and Later Browsers"
22. I Behaviors-paletten velger du + (Add Behavior), og velger Show/Hide layers
fra pop-up menyen.
23. I det nye vinduet velger du "overlayer1" fra Named layers og
klikker på Show og OK
24. Nå må vi gjøre om event'et til onMouseover. I Behaviors-paletten
velger du den lille nedoverpekende svarte pilen mellom Event og Action-listene.
Velg onMouseOver fra nedtrekksmenyen.
25. Så må vi legge til en ny behavior som gjemmer "overlayer1"
igjen når vi fjerner musepekeren fra området (hotspot'en)
26. Klikk nok en gang på + (Add Behavior)
27. I det nye vinduet velger du "overlayer1" fra Named layers og
klikker på Hide og OK
28. Hvis det nå i Behaviorspaletten ikke vises onMouseOut i den nye
behavior'en, klikker du på den lille svarte pilen og velger onMouseOut.
29. gjenta 19-28 for de andre hot-spot'ene
For å oppsummere litt før vi går videre:
Før vi begynte å jobbe i Dreamweaver lagde vi to utgaver av et
bilde. Et "normal status" og et "over status"
I Dreamweaver lagde vi en rekke med like layers og plasserte dem oppå
hverandre med "off-status" synlig i bunn, "over status"
usynlig over dette, og et usynlig layer for hvert av hotspot'ene over disse
igjen.
Så lagde vi hotspot'ene og limte inn samme Map Name i alle bildene
Så brukte vi Behaviors til å vise layerne ved onMouseOver og skjule
de ved onMouseOut
Det som gjenstår nå er å klippe de øverste layerne slik at de bare viser den delen av bildet som ligger over hot-spot'en
30. Fra layers-paletten velger du det nederste "over layeret".
Klikk i bildet og trykk på høyre eller venster pil på tastaturet..
31. Med markøren bakenforbildet, og i selve layeret, velg Insert >
Layer
32. Plasser det "nestede layeret" over den første hot-spot'en
og juster høyde og bredde på layeret slik at det såvidt
dekker hotspot'en.
33. I Properties Inspector noterer du ned verdiene for Left, Top, Width og
Height (L, T, W, H)
34. Fra Layers-paletten velger du "over-layer1" og i Clip-delen
av Properties Inspector legger du inn Left- og Topverdiene du noterte.
35. I Clip Bottom legger du inn summen av Top+Height
36. I Clip Right legger du inn summen av Left+Width
Bruk det "nestede layeret" til å finne Left-, Top-, Width-
og Heightverdiene for neste hotspot, og i "overlayer2", legger du
inn verdiene som ovenfor.
Gjenta for alle øvrige "overlayerX".
Lagre og test!