Hvordan lage Fading i Pop-Up markørbevegelse over elementet i Dreamweaver

August 26

Spry effekter gjør det mulig for Dreamweaver utviklere å legge til animerte effekter til sine websider. En effekt sett mye på internett er det pop-up overlay effekt. Dette skjer når en bruker svever en musepekeren over et objekt på en webside og en popup-meny eller verktøytips vises. Disse pop-up overlegg hjelpe brukerne ved å gi umiddelbar tilbakemelding informasjon om objektet over hvor de er svevende. Bruk av Spry effekter rammeverket bygget inn Dreamweaver kan du legge denne effekten til dine websider og pop-ups visne i når du vil.

Bruksanvisning

Legg Egenskaper og atferd

1 Start Dreamweaver og klikk på "HTML" -knappen øverst i oppstartsvinduet. Dreamweaver viser en ny HTML-dokument.

2 Klikk "Sett inn" og klikk "bilde" for å se listen over bilder på harddisken din. Dobbeltklikk på en av bildefilene i listen og klikk "OK." Dreamweaver limer bildet på dokumentet. Du vil bruke dette bildet til å demonstrere hover effekten som oppstår når du beveger musen over det.

3 Trykk "SHIFT" og "F4" for å vise atferd panel. Dette panelet kan du tilordne atferd til internett elementer. Klikk på "Plus" skilt på toppen av panelet for å vise en liste over tilgjengelige atferd.

4 Klikk på "Javascript" atferd og type "fadeOverlay" - uten anførselstegn - i "Javascript" tekstboksen, og klikk deretter "OK". En ny atferd som heter "fadeOverlay" vises i atferd panel.

5 Klikk på drop-down boksen til venstre for at atferd og klikk "onMouseOver." Å gjøre dette knytter Javascript-funksjonen med onmouseover hendelsen. Klikk på "Plus" skilt igjen, klikk på "Ring Java" og skriv "fadeOverlay ()" i Javascript tekstboksen.

6 Klikk på "OK". En annen oppførsel som heter "fadeOverlay" vises i atferd panel. Klikk på drop-down boksen til venstre for at atferd og klikk "onmouseout." Å gjøre dette knytter det samme Javascript-funksjonen med onmouseout hendelsen.

Legg Javascript-kode

7 Plasser markøren under bildet. Klikk "Sett inn", klikk "Layout Object" og klikk "Div Tag." Skriv "overlay1" inn i "ID" tekstboksen som vises. Dette setter div ID verdien til "overlay1."

8 Klikk på "Code" -kategorien for å vise dokumenter HTML-kode. Lim inn koden vist nedenfor etter stengetid body-koden som vises nær bunnen av dokumentet:

<Script>
Var overlayObject;
overlayObject = ny Spry.Effect.Fade ( 'overlay1', {varighet: 1000, fra: 100, til: 0, veksle: true});
overlayObject.start ();
</ Script>

Dette Javascript kode oppretter et overlegg objekt som heter "overlayObject." Koden tildeler også en Adobe Spry effekt som heter "Fade" til objektet. Denne effekten forsvinner et objekt opasitet. Den "fra" eiendom sett er objektets opprinnelige opasitet verdi. Den "til" eiendom sett er det slutt opasitet etter fade effekt er fullført. Den "veksle" egenskapen gjør en nettleser veksler mellom fading overlegget og viser det som du beveger musen over objektet og vekk fra den. Styr fade effekt varighet ved å tildele en verdi - i millisekunder - til varigheten eiendom. Denne verdien er 1000 millisekunder i dette eksemplet.

9 Finn dokumentets avsluttende "</ script>" tag. Lim inn koden under før den koden:

fungere fadeOverlay ()
{
overlayObject.start ();
}

Dette er fadeOverlay funksjon du tilordnet bildets onmouseover og onmouseout hendelseshåndterere. Den overlayObject.start () uttalelse genererer fade effekt.

10 Trykk "F12". Din standard nettleser åpnes og viser en webside som inneholder bildet. Flytt musepekeren over bildet. Den pop-up overlegg blekner i. Flytt musepekeren bort fra bildet og pop-up går unna.

Hint

Dette eksemplet viser legge en popup til et bilde. Bruk disse trinnene for å legge til en popup overlay HTML-elementet.