Hvordan kode en DIV Overlay

Hvordan kode en DIV Overlay


Cascading Style Sheet, eller CSS, overlegg gir deg muligheten til å plassere objekter over andre objekter på en webside. DIV elementer - som inneholder andre HTML-elementer - er ideelle kandidater for CSS posisjonering. Bruk overlegg for å fremheve viktige elementer på en webside. Du kan også lage overlegg som forårsaker tekst eller grafiske bildene skal vises hvor som helst du liker som webprogrammet kjører. CSS "absolutt" posisjonering eiendom blir overlay prosessen mulig.

Bruksanvisning

1 Åpne en av websiden din dokumenter ved hjelp av en HTML-editor eller Notisblokk. Velg et dokument som inneholder flere elementer som bilder, avsnitt eller overskrifter. Disse vil fungere som et bakteppe for DIV legget du vil skape.

2 Finn dokumentets "<body>" -delen og lim inn følgende HTML-kode i denne delen:

<Div id = "div1" class = "divOverlay">

Dette er et overlegg Div ->

</ Div>

<Input type = "button" value = "Klikk for å Overlegg onclick =" return ShowOverlay ( 'div1', 100, 200) "/> </ p>

Dette skaper en DIV med en ID "div1" - den refererer til en CSS-klasse som heter "divOverlay." Knappen under DIV kaller "ShowOverlay" Javascript-funksjonen - den sender DIV ID til funksjonen, og også går de ønskede "x" og "y" koordinatene hvor du ønsker DIV skal vises på websiden. I dette eksemplet er "x" koordinere verdi er "100" og "y" koordinere verdi er "200."

3 Legg denne CSS-koden til dokumentets "<head>" -delen:

<Style type = "text / css">

.divOverlay {top: 0px; venstre: 0px; position: absolute; synlighet: skjult; z-index: 500;}

</ Style

Dette skaper "divOverlay" CSS-klasse som er beskrevet tidligere. Den øvre og venstre verdiene posisjon overlay null piksler fra toppen av websiden og null piksler fra venstre. Posisjonen hotellets "absolutt" verdien kan nettlesere for å flytte et element som refererer til klassen. Den z-index egenskapen avgjør hvordan en nettleser "stabler" et element. En sideelement med en lav z-indeksverdi, for eksempel "3" vises bak et element med en høyere z-indeksverdi. Ved å bruke en veldig stor verdi - "500" i dette eksemplet - du sikre at din overlegg DIV vises foran alle objekter i stedet for bak dem. Merk klassen synlighet verdi er "skjult" - dette gjør DIV usynlig når siden lastes.

4 Lim inn følgende Javascript-koden under CSS-koden som er beskrevet i forrige trinn:

<Script language = "javascript" type = "text / javascript">

funksjon ShowOverlay (Divid, xCoordinate, yCoordinate) {

Var divObject = document.getElementById (divId);

divObject.style.visibility = "synlig";

divObject.style.left = xCoordinate;

divObject.style.top = yCoordinate;

}

</ Script>

Dette er "ShowOverlay" -funksjonen kalles når du klikker på knappen. Den mottar DIV ID og "x" og "y" posisjonskoordinater vedtatt av knapp klikk hendelsen. Koden gjør deretter DIV synlig og flytter den til de ønskede koordinater.

5 Lagre dokumentet og vise den i en nettleser. Klikk på "Klikk for å Overlegg Div" -knappen. DIV vises, flytter til koordinatene som er angitt i koden og overlegg enhver gjenstand som vises under det på websiden.

Hint

  • Når du ringer til "ShowOverlay," være sikker på å passere den ID-en din overlegg DIV og de to "x" og "y" skjermkoordinater. Du kan kalle funksjonen når som helst, selv etter at siden lastes. Gjør du det fører til at overlegget skal vises når en bruker først ser siden din.
  • Den DIV i dette eksemplet inneholder tekst, men du kan plassere et element du inne i DIV-koder. For eksempel, for å overlappe en pil over noen objekt på siden din, finne et bilde av en pil og legge sin "Img" tag til DIV. Pilen går deretter til ønsket side plassering når du kaller Javascript-funksjonen.