TFeri.hu

Weblapkészítés HTML alapokon 5. PDF Nyomtatás E-mail
  
Tartalomjegyzék
Weblapkészítés HTML alapokon 5.
Kerdoiv
Egyéb elemek
HTML színkiosztás
HTML karakterek
Nyelvi kódok
Minden oldal

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 Map tag <HTML>
<IMG src="/map.gif" usemap="minta31.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: Ezt a címet a spamrobotok ellen védjük. Engedélyezze a Javascript használatát, hogy megtekinthesse. ">
</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 file-ban lennie, de lassabb kapcsolatú gépek miatt célszerű azonos file-ba 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ó file, valamint a térkép helyét.

 

A térkép feldolgozásához kell a <MAP> 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!



 
Ulti Clocks content

Hirdetés