A "térképek"

 

 

Ezen az oldalon a képek felhasználásának egy speciális módjáról lesz szó.
A képekhez, mint bármelyik elemhez hivatkozást fűzhetünk. Ekkor a képre klikkelve be fog következni a kívánt esemény (pl. másik oldal betöltése). Azonban van lehetőség a HTML-ben arra is, hogy egy kép különböző részeihez más-más hivatkozás tartozzon. Ezt a lehetőséget célszerűen kihasználhatjuk például grafikus menük készítésekor.

Nézzünk meg először itt is egy példát:

Ha ki akarod próbálni, a böngésződ vissza (back) gombjával tudsz visszajönni.

Most lássuk, hogy művelhetünk ilyen csodát:


A fenti példánknak így néz ki a HTML forráskódja:

<map name="aaa">

  <area shape="circle" coords="66,138,29" href="fej-kepek.html">

  <area shape="rect" coords="137,59,248,106" href="fej0.html">

  <area shape="poly" coords="316,104,348,126,337,160,300,163,287,128" 
	href="../../tanf.html">

</map>

<img src="imgmap.gif" border=0 width=400 height=200 usemap="#aaa">

Láthatjuk, először el kell helyezni a kívánt képet (példánkban az imgmap.gif nevűt).
Ehhez az usemap= attribútum segítségével hozzárendeljük a kijelölt területek meghatározását, amiket az azonos name= attribútummal meghatározott <MAP> elemben írhatunk le.
A MAP elem tartalmazza az AREA tagot, annyit, ahány területet ki akarunk jelölni a képen. A kijelölés háromféle alakú lehet:

  • kerek: ekkor az AREA elem shape= attribútumának rect értéket írunk be. A kör koordinátáit a kör kép tetejétől, bal szélétől mért távolságával és a kör sugarával határozhatjuk meg a coords= attribútumban,
  • négyszögletű: (shape=circle) Ekkor a négyszög sarkainak a helyzetét kell megadni,
  • sokszög alakú: (shape=poly) Itt - a négyszöghöz hasonlóan - a sokszög sarkainak helyzetét kell megadni.

Már csak a megfelelő hivatkozásokat kell megírni a már tanult módon és az AREA elemben elhelyezni.

fel...


A gyakorló részben a fenti példát helyeztem el. Változtass kedved szerint a kódon, aztán nézd meg, amit alkottál:

   

 



fel...
előző: a keretek...
következő: egyéb elemek...
tartalom...


ThomasWebMűhely
(c)Katona Tibor
2001-2002