|
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:
|
|