Tamás Ferenc: Weblapkészítés HTML alapokon – 5. rész

14. fejezet: Térképek

Ha egy bonyolultabb képünk van rengeteg utalással és felirattal és/vagy rajzzal, akkor célszerű egy olyan rendszert kialakítani, amelynél egyes részekre kattintva nyitódhat meg egy újabb kapcsolat. Mintaképpen nézzük meg a következő képet és fájlt: (htmlpelda28.html)

<HTML>
<IMG src="/map.gif" usemap="htmlpelda28.html#terkep1">
<MAP name="terkep1">
<area shape="rect" coords="25,12,114,32" href="/minta1.html">
<area shape="rect" coords="25,33,114,47" href="/minta2.html">
<area shape="rect" coords="25,48,119,70" href="/minta3.html">
<area shape="rect" coords="25,71,119,88" href="/minta4.html">
<area shape="circle" coords="200,212,50" href="/minta5.html">
<area shape="poly" coords="20,200,20,250,80,250,140,200,20,200" href="mailto:Ez az e-mail-cím a szpemrobotok elleni védelem alatt áll. Megtekintéséhez engedélyeznie kell a JavaScript használatát.">
</MAP>
</HTML>

(Megjegyzés: a fenti kép a PhotoShop 5.0 és a CorelDraw 9 programokkal készült!)
A dolog lényege, hogy a térképnek és a feldolgozott utalásoknak nem kell azonos fájlban lennie, de lassabb kapcsolatú gépek miatt célszerű azonos fájlba tenni a két anyagot. Az első fontos utasítás az IMG SRC-ben lévő USEMAP paraméter. Itt meg kell adni a térképfeldolgozó fájl, valamint a térkép helyét.

A térkép feldolgozásához kell a <MAP name="térképneve"> tag. A konkrét élőkapcsokat az <area> tag szabályozza. Fontosabb paraméterei:
- shape = rect (téglalap), circle (kör), poly (polygon), default (mindenhol máshol - egyéb helyen)
- coords = koordináták. Téglalap esetén két átellenes saroké, kör esetén a középpont és a sugár, poligon esetén sorban a sarkok (az utolsó legyen azonos az elsővel!).
- href = élőkapocs. Teljes utalás is lehet, nem csak egyszerű file.
- alt = alternatív szöveg.
- target = Megnyitandó file helye (pl.) megosztás esetén.
- title = az egérmutató hatására kiírandó szöveg.
- nohref = ennek a területnek nincsen élőkapcsa.
- hreflang = a cél-URL nyelve. (Csak HTML5.)
- media = megadja a cél-média/eszköz típusát. (Csak HTML5.)
- rel = alternate/author/bookmark/help/license/next/nofollow/…
/noreferrer/prefetch/prev/search/tag : megadja a jelenlegi dokumentum és a cél közötti kapcsolatot. (Csak HTML5.)
24. feladat: Készítsen térképet legalább 4-fajta célponttal!