1. Skapa en bild:
- Börja med att skapa en bildfil (t.ex. "image.jpg").
2. Definiera bildkartan:
- Skapa ett ` `-element i HTML-koden och ge det ett unikt ID (t.ex. "image-map").
3. Definiera klickbara områden:
- Inom elementet ` ` använder du elementet `` för att definiera klickbara områden på bilden. Varje ``-element representerar en klickbar region.
4. Ange bildkartas koordinater:
- För varje ``-element, ange koordinaterna som definierar gränserna för det klickbara området. Detta kan göras med hjälp av attributet `coords`. Koordinaterna anges som en kommaseparerad lista, som representerar de övre vänstra (x1, y1) och nedre högra (x2, y2) koordinaterna för området.
5. Definiera åtgärd för klick:
- Använd `href`-attributet inom `` för att specificera åtgärden som ska ske när en användare klickar på just den delen av bilden. Det kan vara en länk till en annan sida, en e-postadress eller någon annan giltig URL.
6. Associera bildkarta med bild:
- För att koppla samman bildkartan med bilden, använd attributet `usemap` i `
```
I det här exemplet finns det en bild som heter "image.jpg" med två klickbara områden. Det första området definieras av en rektangel med koordinater (10, 10) och (150, 150), och när du klickar på den kommer du till "länk-1.html." Det andra området definieras av en cirkel med ett centrum vid (200, 200) och en radie på 50, och den länkar till "länk-2.html" när den klickas.
Detta är bara ett grundläggande exempel. Du kan skapa mer komplexa bildkartor med flera former och olika åtgärder för varje klickbar region.
Tidigare: Hur skapar man HTML-e-postlänkar med ämne, CC och BCC?
