Bildkarta

En bildkarta ( eng. image map , ibland en pekkarta eller en grafisk karta ) är ett grafiskt objekt av HTML -markeringsspråket som är associerat med en bild och som innehåller speciella områden (hot spots), när man klickar på den sker en övergång till en specifik URL (med javascript kan du ställa in andra åtgärder). Genom att använda bildkartor kan du lagra flera länkar i en enda bild.

Användning

För att lägga till en bildkarta till en webbsida används en parad HTML -tagg <map>, i attributet "name" vars unika identifierare för kartan anges i dokumentet. Oparade <area>-taggar läggs till i den, som var och en beskriver ett aktivt område. Taggen <img> som ska länkas till kartan läggs sedan till med ett usemap- attribut som innehåller namnet på kartan som ska länkas. Attributvärdet måste börja med ett pundtecken . Samtidigt måste bildens mått uttryckligen anges i taggen <img>.

Parametrar (attribut) för

karta

namn är ID för bildkartan. Unikt i dokumentet. I XHTML är namnattributet föråldrat och attributet id [1] föreslås användas istället .

område

form - formen på hotspot. Giltiga värden: cirkel ( cirkel ), rektangel ( rektangel ), poly ( polygon ).
alt - alternativ text för området. Fungerar endast som en kommentar för länken, eftersom den inte visas på skärmen.
title - låter dig ställa in ett verktygstips för hotspot.
coords - hotspot-koordinater. Koordinaterna mäts i pixlar från bildens övre vänstra hörn, vilket motsvarar värdet "0,0". Den första siffran är den horisontella koordinaten, den andra är den vertikala koordinaten. Listan över koordinater beror på områdets form:

För en cirkel anges koordinaterna för cirkelns centrum och radien:

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

För en rektangel är koordinaterna för det övre vänstra och nedre högra hörnet:

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

För en polygon sätts koordinaterna för dess hörn:

< area coords = "x1,y1,x2,y2,...,xN,yN" > I detta fall, för att "stänga" polygonen, måste de första och sista paren av X- och Y-koordinater vara desamma. Om dessa värden inte är desamma måste webbläsaren beräkna ett extra par koordinater för att stänga polygonen.

href - Anger länkadressen för regionen. Inspelningsreglerna är desamma som för <A>-taggen.

Exempel

Nedan är koden som skapar en bildkarta och binder den till en bild:

< html > < body > < img width = "500" height = "200" usemap = "#somemap" src = "upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png" > < map name = "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 blir följande (aktiva zoner finns ovanför bilderna av figurerna):

Fördelar och nackdelar

Fördelar

Kartor låter dig definiera vilken form som helst av länkområdet. Med tanke på att datorbilder i sig är rektangulära är det inte möjligt att göra en grafisk referens med komplex form, till exempel för att ange ett geografiskt område, utan bildkartor.
Det är bekvämare att arbeta med en fil - du behöver inte oroa dig för att sammanfoga enskilda fragment.

Nackdelar

Du kan inte ställa in alternativ text för enskilda områden. Alternativ text låter dig få textinformation om bilden när laddning av bilder är inaktiverat i webbläsaren. Om du stänger av bildvisning kommer vi till slut bara att se en tom rektangel.
Den komplexa formen på länkområdet ökar mängden HTML-kod. Konturen består av en uppsättning raka segment, för varje punkt av vilka två koordinater ska anges, och det totala antalet sådana punkter kan vara ganska stort. Komplexa former är ett specialfall och används sällan.
Med bildkort kan du inte skapa olika effekter som är tillgängliga när du skär en bild i fragment: effekten av rullning, partiell animering, individuell optimering av bilder för att de laddas snabbt, etc.