Hvordan du bygger bildekart i HTML5 - dummies

Websider bruker ofte bilder til navigering. De er finere enn enkle tekstkoblinger, og du kan legge til både skjema og funksjon på siden din med ett element. Når du bruker et

element med et ankerelement for å opprette et koblingsbilde, kan du kun legge ved en lenke til bildet. Hvis du vil opprette et større bilde som kobler koblinger til forskjellige regioner på siden, trenger du et bildekart.

For å lage et bildekart, trenger du to ting:

• Et bilde med forskjellige områder som er åpenbare for brukerne

  For eksempel kan et bilde av en park vise en lekeplass, et piknikområde og et dammerområde.

• Markup for å kartlegge de forskjellige regionene på kartet til forskjellige nettadresser

Elementer og attributter

Bruk elementet

for å legge til kartbildet i siden din, akkurat som du ville noe annet bilde. I tillegg inkluderer du attributten usemap for å la nettleseren vite at bildekartinformasjonen skal gå med det bildet. Verdien av usemap-attributtet er navnet på kartet ditt.

Du bruker to elementer og en samling av attributter for å definere bilde kartet:

• kartet inneholder kartinformasjonen. Kartelementet bruker navnetattributtet til å identifisere kartet. Verdien av navnet skal samsvare med verdien av usemap i elementet

  som går med kartet.

• området knytter bestemte deler av kartet til nettadresser. Områdeelementet tar disse attributter for å definere spesifikasjonene for hver del av kartet:

  • form: Angir formen på regionen (et klikkbart sted som gjør at bildet kartet fungerer). Du kan velge mellom rektangel (rektangel), sirkel og poly (en trekant eller polygon).

  • koordinater: Definerer regionens koordinater.

    Et rektangels koordinater inkluderer venstre, høyre, topp og bunnpunkt.

    En sirkels koordinater inkluderer x- og y-koordinatene for senterets sirkel og sirkelens radius.

    En polygons koordinater er en samling av x- og y-koordinater for hvert vertex i polygonen.

    For å bestemme bildekoordinater kan du bruke et bildekarteditor som Mapedit eller en grafikkredigerer som PaintShop Photo Pro. Mapedit registrerer også disse koordinatene for deg.

  • href: Angir nettadressen som regionen kobler til (kan være absolutt eller relativ).

  • alt: Gir alternativ tekst til bildeområdet.

Markup

Følgende definerer et tre-regionskart kalt NavMap koblet til grafikkfilen kalt 09fg08-navmap. gif:

Figuren viser hvordan en nettleser viser denne oppmerkningen.

Når musen sitter over en region i kartet, blir markøren til en pekende hånd (akkurat som den endres over en hvilken som helst annen hyperkobling).Så benytt deg av tittelteksten for å inkludere nyttig informasjon om linken og for å gjøre kartet mer tilgjengelig for synshemmede.

En vanlig bruk for bildekart er å vise kart over steder (stater, land og så) til koblede kart. Her er noen elektroniske ressurser du kan bruke:

• The About. com bilde kart veiledning gir mer informasjon om å bygge bilde kart for hånd.

• HTMLGoodies har en flott samling av kartkartopplæringer og informasjon.

Å lage bildekart for hånd kan være vanskelig. Bruk et bilderedigeringsverktøy til å identifisere hvert punkt i kartet ditt og deretter opprette riktig merking for det. De fleste HTML-verktøy inkluderer verktøy for å hjelpe deg med å lage bildekart. Hvis du utnytter et slikt verktøy, kan du opprette bildeark raskt og med få feil.

Vær forsiktig når du bruker bildekart. Hvis du lager et visuelt hjelpemiddel (noe som et kart med lenker til forskjellige land som er vist der, for eksempel), bruker et bildekart perfekt mening. På den annen side bør du aldri bruke grafikk med bildekart for hovednavigasjonen. (Vel, du kan, , men du vil ikke like resultatene!)

Bruk alltid HTML og CSS til hovednavigasjonsnavigasjonen, eller hvis du må bruke et grafisk bildekart, basert alternativ sammen med det kartet, slik at synshemmede besøkende også kan navigere ved å bruke alternative kontroller i stedet.

Generelt er det beste for navigering å bruke tekst for knappetiketter og å la CSS håndtere arbeidet med å få knapper til å se bra ut.