Billedkort

Et billedkort ( eng. image map , nogle gange et touch-kort eller et grafisk kort ) er et grafisk objekt af HTML -markeringssproget, der er knyttet til et billede og indeholder specielle områder (hot spots), når der klikkes, sker der en overgang til en bestemt URL (ved at bruge javascript kan du indstille andre handlinger). Brug af billedkort giver dig mulighed for at gemme flere links i et enkelt billede.

Brug

For at tilføje et billedkort til en webside , bruges et parret HTML <map>-tag, i attributten "name", hvis unikke identifikator for kortet er angivet i dokumentet. Der tilføjes uparrede <område>-tags inde i det, som hver beskriver ét aktivt område. <img>-tagget, der skal linkes til kortet, tilføjes derefter en usemap- attribut, der indeholder navnet på det kort, der skal linkes. Attributværdien skal begynde med et pund-tegn . Samtidig skal billedets dimensioner angives eksplicit i <img>-tagget.

Parametre (attributter) for

kort

navn er billedkortets ID. Unik i dokumentet. I XHTML er name -attributten forældet, og id [1] -attributten foreslås brugt i stedet .

område

form - formen på hotspottet. Gyldige værdier: cirkel ( cirkel ), rektangel ( rektangel ), poly ( polygon ).
alt - alternativ tekst for området. Fungerer kun som kommentar til linket, da det ikke vises på skærmen.
title - giver dig mulighed for at indstille et værktøjstip til hotspottet.
koordinater - hotspot-koordinater. Koordinaterne måles i pixels fra øverste venstre hjørne af billedet, hvilket svarer til værdien "0,0". Det første tal er den vandrette koordinat, det andet er den lodrette koordinat. Listen over koordinater afhænger af områdets form:

For en cirkel er koordinaterne for cirklens centrum og radius specificeret:

< area coords = "x,y,r" >

For et rektangel er koordinaterne for det øverste venstre og nederste højre hjørne:

< areacoords = " x1,y1,x2,y2" >

For en polygon er koordinaterne for dens hjørner sat:

< area coords = "x1,y1,x2,y2,...,xN,yN" > I dette tilfælde, for at "lukke" polygonen, skal det første og sidste par af X- og Y-koordinater være ens. Hvis disse værdier ikke er de samme, skal browseren beregne et ekstra par koordinater for at lukke polygonen.

href - Angiver linkadressen for regionen. Reglerne for optagelse er de samme som for <A>-tagget.

Eksempler

Nedenfor er koden, der opretter et billedkort og binder det til et billede:

< html > < body > < img width = "500" height = "200" usemap = " #somemap " src = "upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png" > < kortnavn = "somemap" > < area shape = "rect" coords = "6, 7, 140, 196" href = "en.wikipedia.org/wiki/Rectangle" > < area shape = "cirkel" coords = "239, 98, 92" href = "en.wikipedia.org/wiki/Circle" > < area shape = "poly" coords = "386, 16, 344, 56, 350, 189, 385, 132, 489, 190, 496, 74" href = "en.wikipedia.org/wiki/Polygon" > </ map > </ body > </ html >

Resultatet bliver følgende (aktive zoner er placeret over billederne af figurerne):

Fordele og ulemper

Fordele

Kort giver dig mulighed for at definere enhver form for linkområdet. Da computerbilleder i sagens natur er rektangulære, er det ikke muligt at lave en grafisk reference med kompleks form, for eksempel for at angive et geografisk område uden billedkort.
Det er mere bekvemt at arbejde med én fil - du behøver ikke bekymre dig om at forbinde individuelle fragmenter.

Ulemper

Du kan ikke indstille alternativ tekst for individuelle områder. Alternativ tekst giver dig mulighed for at få tekstinformation om billedet, når indlæsning af billeder er deaktiveret i browseren. Hvis du slår billedvisning fra, vil vi i sidste ende kun se et tomt rektangel.
Linkområdets komplekse form øger mængden af HTML-kode. Konturen består af et sæt lige segmenter, for hvert punkt, hvoraf to koordinater skal angives, og det samlede antal af sådanne punkter kan være ret stort. Komplekse former er et særligt tilfælde og bruges sjældent.
Med billedkort kan du ikke skabe forskellige effekter, der er tilgængelige, når du skærer et billede i fragmenter: effekten af rullende, delvis animation, individuel optimering af billeder til deres hurtige indlæsning osv.