Hvordan lage en Usemap i en Div

Når du legger ut en nettside, mange utviklere bruke divisjoner, eller divs, for å plassere innholdet på sidene sine. En annen layout metode, som vanligvis brukes i en divisjon, er et bildekart. Bildekart lage klikkbare lenker områder på toppen av et bilde, slik at linker som skal integreres i en kompleks side design. Ved hjelp av bildekartet inne i en div gir bred kontroll over stillingen, se ut og fungere av elementene i nettstedet ditt.

Bruksanvisning

Opprett en bildekart

1 Lag et kart i HTML header ved hjelp av "<map>" tag. Gi kartet et unikt navn og ID. For eksempel, hvis kartet er en navigasjonsmeny, åpning kartet lappen kan se slik ut:

<Map name = "navigasjon" id = "navigasjon">

2 Legg en kartlagt kobling ved å opprette en "<område>" tag. Et område inneholder en link, form betegnelse og koordinater til å definere formen, en ID som referanse av andre deler av nettstedet og alternativ tekst for brukere med tekst-til-tale-programvare. For å opprette et område i form av et rektangel som er 100 piksler bred, 50 piksler høyt, og ligger i øverste venstre hjørne av bildet, legge til:

<Område href = "http://www.linkedwebsite.com" shape = "rect" coords = "0, 0, 100, 50" id = "kobling1" alt = "tilknyttede hjemmesider" />

3 Legg hver nødvendig kartlagt linken, og deretter avslutte kartet ved å legge til "</ kart>" etter den endelige link.

Usemap i en Div

4 Sett inn bildet du opprettet for kartet i divisjonen ved å opprette en "<img />" tag mellom "<div>" og "</ div>" koder. Den backslash forteller leseren at etter innholdet i denne koden, bildet er ferdig blir opprettet.

5 Legg til en kildeposisjon for bildet og alternative teksten for anvendelse sammen med tekst-til-tale-programvare. For eksempel:

<Img src = "images / imagemaplocation.jpg" alt = "navigasjonsmeny image" />

Dette forteller nettsiden at bildet er plassert i "bilder" -mappen på ditt nettsted katalog og heter "imagemaplocation.jpg." Når en besøkende kommer til nettstedet ditt ved hjelp av en tekst-til-tale-program, skal besøkende kunne finne bildet av den alternative beskrivelse av "navigasjonsmenyen bilde."

6 Sett "usemap" kommandoen før den avsluttende brakett i bildet, noe som gjør at den er lik navnet på kartet du opprettet med en hashtag, eller firkanttegn, foran navnet. For eksempel vil bruke menykartet navigasjon, legge til:

usemap = "#navigation"

7 Lagre nettsiden lokalt og laste opp nytt innhold til serveren din for å bruke endringene online.

Hint

• Bildekart områder også kan utformes på en sirkel med de definerende punkter være midtpunktet og den radius eller et polygon med flere koordinatpunkter for å definere formen.