Képtérkép

A képtérkép ( angol képtérkép , néha érintőtérkép vagy grafikus térkép ) a HTML jelölőnyelv egy képhez társított grafikus objektuma , amely speciális területeket (hot spotokat) tartalmaz, amikor rákattint egy adott URL -re áttérés történik. ( Javascript használatával más műveleteket is beállíthat). A képtérképek használatával több hivatkozást tárolhat egyetlen képen.

Használat

Képtérkép weboldalhoz való hozzáadásához egy párosított HTML <map> taget használnak, amelynek "name" attribútuma a térkép egyedi azonosítója van megadva a dokumentumon belül. Nem párosított <area> címkék kerülnek bele, amelyek mindegyike egy aktív területet ír le. A térképhez csatolandó <img> címkéhez ezután hozzá lesz fűzve egy usemap attribútum , amely a csatolni kívánt térkép nevét tartalmazza. Az attribútum értékének font jellel kell kezdődnie . Ugyanakkor a kép méreteit kifejezetten meg kell adni az <img> címkében.

Paraméterei (attribútumai) a

térkép

a név a képtérkép azonosítója. Egyedülálló a dokumentumon belül. Az XHTML -ben a name attribútum elavult, és helyette az id [1] attribútumot javasoljuk használni .

terület

alakzat - a hotspot alakja. Érvényes értékek: circle ( circle ), rect ( téglalap ), poli ( sokszög ).
alt - alternatív szöveg a területhez. Csak a hivatkozás megjegyzéseként szolgál, mivel nem jelenik meg a képernyőn.
title – lehetővé teszi egy eszköztipp beállítását a hotspothoz.
koordináták – hotspot koordináták. A koordinátákat pixelben mérjük a kép bal felső sarkától, ami a „0,0” értéknek felel meg. Az első szám a vízszintes koordináta, a második a függőleges koordináta. A koordináták listája a terület alakjától függ:

Egy kör esetében a kör középpontjának és a sugárnak a koordinátái vannak megadva:

< területi koordináták = "x,y,r" >

Téglalap esetén a bal felső és a jobb alsó sarok koordinátái:

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

Egy sokszögnél a csúcsok koordinátái be vannak állítva:

< területi koordináták = "x1,y1,x2,y2,…,xN,yN" > Ebben az esetben a sokszög "bezárásához" az X és Y koordináták első és utolsó párjának meg kell egyeznie. Ha ezek az értékek nem egyeznek, a böngészőnek további koordinátapárt kell kiszámítania a sokszög bezárásához.

href – Megadja a terület hivatkozási címét. A rögzítési szabályok ugyanazok, mint az <A> címkénél.

Példák

Az alábbiakban látható a kód, amely egy képtérképet hoz létre, és egy képhez köti:

< html > < body > < img width = "500" height = "200" usemap = "#somemap" src = "upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png" > < térkép neve = "somemap" > < area shape = "rect" coords = "6, 7, 140, 196" href = "en.wikipedia.org/wiki/Rectangle" > < area shape = "circle" 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 >

Az eredmény a következő lesz (az aktív zónák az ábrák képei felett találhatók):

Előnyök és hátrányok

Előnyök

A térképek lehetővé teszik a hivatkozási terület tetszőleges alakjának meghatározását. Tekintettel arra, hogy a számítógépes képek eredendően téglalap alakúak, képtérképek nélkül nem lehet bonyolult alakú grafikus hivatkozást tenni, például egy földrajzi terület megjelölésére.
Kényelmesebb egy fájllal dolgozni - nem kell aggódnia az egyes töredékek egyesítése miatt.

Hátrányok

Az egyes területekhez nem állíthat be alternatív szöveget. Az alternatív szöveg lehetővé teszi, hogy szöveges információkat kapjon a képről, ha a képek betöltése le van tiltva a böngészőben. Ha kikapcsolja a képmegtekintést, akkor végül csak egy üres téglalapot fogunk látni.
A hivatkozási terület összetett alakja megnöveli a HTML kód mennyiségét. A kontúr egyenes szakaszok halmazából áll, amelyek minden pontjához két koordinátát kell megadni, és az ilyen pontok száma meglehetősen nagy lehet. Az összetett formák speciális esetek, és ritkán használják őket.
A képkártyákkal nem hozhat létre különböző effektusokat, amelyek egy kép töredékekre vágásakor érhetők el: görgetés hatása, részleges animáció, a képek egyedi optimalizálása a gyors betöltéshez stb.