Hvordan få et bilde til å ekspandere når rullet over i Dreamweaver CS5

Hvis du bruker Dreamweaver CS5 for å lage websider, kan du ikke vet om sine innebygde spesialeffekter. En av disse, "Grow / Shrink" effekt, som gjør et bilde på siden din utvides. Et nettsted besøkende ruller bare en pekeren over et bilde for å se en større versjon av bildet umiddelbart. Du kan finne denne effekten hendig når du viser produkter for salg eller miniatyrbilder av malerier. Site eiere som kode nettsteder for hånd må skrive Javascript for å skape denne effekten. Ved hjelp av Dreamweaver, kan du legge det til din webside i minutter ved hjelp av programmets menyer og kontrollpaneler.

Bruksanvisning

1 Start Dreamweaver og finn "Lag ny" i oppstartsvinduet. Klikk "HTML" og deretter "Design". Dreamweaver går Design visningen, og viser en tom webside dokumentet.

2 Klikk "Sett inn" og deretter velge "Image" for å vise "Select Image Source" vinduet. Velg et bilde du vil bruke på websiden, og klikk deretter "OK" to ganger. Bildet vises på websiden.

3 Trykk "Shift" og "F4" for å vise "Tag Inspector" panel. Velg "atferd", og klikk deretter på "Plus" skilt vises under ordet "atferd." Klikk på "Effekter", og velg deretter "Grow / Shrink" for å åpne "Grow / Shrink" -vinduet.

4 Velg "Effect", og deretter "Grow". Skriv inn en verdi som er større enn 100 i "Grow til" tekstboksen. Bildet vil utvide til den prosentvise verdien du skriver inn i denne tekstboksen. For eksempel, for å gjøre bildet utvide til to ganger sin opprinnelige størrelse når en markør ruller over det, skriv "200" i tekstboksen.

5 Klikk "OK" for å lukke Grow / Shrink-vinduet, og klikk deretter på "onclick" drop-down-knappen. En rullegardinmeny vises. Velg "onMouseOver" for å legge til en onMouseOver hendelse til bildet.

6 Velg "Live View" for å vise websiden. Rull musepekeren over bildet som vises på siden. Det utvider til prosentverdien du setter i "Grow / Shrink" -vinduet.

Hint

• Hvis du ønsker å animere roll effekt, skriver inn et tall i "Effect Varighet" tekstboksen lokalisert i Grow / Shrink vinduet. Verdien du skriver inn - i millisekunder - styrer hvor lang tid det tar for at bildet skal nå sitt maksimale størrelsen når brukere ruller over bildet. Skriv "1000" i tekstboksen, for eksempel, og bildet vil ta ett sekund for å utvide fra sin opprinnelige størrelse til stort format.