11. A kép mint hivatkozás
Mint az előző fejezetben már sejtettük, a képeket hivatkozásként is használhatjuk. Ennek több módja is van.
Az egyszerű képes hivatkozás
Ez az <a> és az <img> elemek együttes használatával érjük el:
<a href="porszivo.htm"><img src="raketa.gif" border=0></a>
Ez a sor a raketa.gif képet megjeleníti, és ha a képre kattintunk, betöltődik a porszivo.htm oldal. Ha képet használunk hivatkozásként, akkor mindenképpen érdemes a kép keretét eltűntetni, mert a legtöbb böngésző olyan színben rajzol keretet a kép köré, amilyen színben a hivatkozásokat egyébként megjelenítené. Ez gyakran tönkreteszi az oldal képét. (Természetesen megfelelő színválasztásnál a keret sem feltétlenül zavaró.)
Gyakori megoldás, hogy ilyen esetekben úgynevezett gombokat használnak képnek. Ezek olyan képek, amelyek a háztartási eszközökön megtalálható gombokra emlékeztetnek: általában négyszögletes, de lekerekített sarkú képek, melyeket árnyékolás tesz térhatásúvá, és amelyeken a funkciójukra utaló feliratok vagy egyértelmű ábrák vannak.
A hivatkozásként használt képek másik gyakori típusa a banner. Ezek hosszúkás, általában 408*60 vagy 468*60 képpont nagyságú képek (gyakran mozgóképek), melyek bizonyos honlapokra invitálják a látogatókat. Gyakori szokás, hogy barátunk, ismerősünk honlapjának bannerét feltesszük a saját oldalunkra, míg ők cserébe felteszik a miénket a sajátunkra. (Vannak hivatalos bannercserélő szolgátatások is.) Mivel a bannerok általában más honlapokra viszik a látogatókat, célszerű az oldalakat új böngészőablakban megnyitni (emlékeztetőül: ezt az <a> elembe írt target=new paraméterrel tehetjük meg).
Fontos, hogy a hivatkozásként használt kép egyértelmű legyen. Így például cégek, egyesületek jelvényei jól használhatóak az adott intézmény honlapjára való hivatkozásként. Ha több nyelvű a honlapunk, a választható nyelveket jelezhetjük kis zászlócskákkal. Kellemes élményt nyújthat, ha oldalunk témájához illő képes hivatkozásokat helyezünk el.
Természetesen az <a> és az </a> elemek közé tehetünk egyszerre képet és szöveget is (a hivatkozás mérete nincs korlátozva), de ez csak ritkán esztétikus.
A hivatkozástérképek használata
Használhatjuk a képeket térképként is. Ilyenkor a kép egyes részeit jelölhetjük ki hivatkozásként. A kép különböző pontjaira kattintva más-más oldalak jelennek meg. Lehet szó valódi térképekről (ha egy egyesület honlapját készítjük, akkor Magyarország térképén feltűntethetjük, hol vannak az országban alszervezetei az egyesületnek, és rájuk kattintva részletes adatokat kaphatunk róluk), de megtehetjük akármilyen képpel is (ha a légkörről készítünk honlapot, akkor egy képen az egyes légköri övekre kattintva részletesebb információkat kapunk róluk).
Ahhoz, hogy egy képet térképként használhassunk, a <img> elemben a usemap paramétert kell használnunk. Ebben meg kell adnunk, hogy melyik térképet használjuk. A térkép neve elé egy kettőskeresztet kell írnunk. Például:
<img src="sikidomok.gif" usemap="#geometria" alt="Válasszon!">
Tegyük fel, hogy lapunk témája az alapfokú geometria, és erről az oldalról a háromszöget, a négyzetet és a kört tárgyaló oldalakat lehet megnyitni. A képen tehát egy háromszög, egy kör és egy négyzet van. Készítsük el a térképet! A térkép meghatározása a <map> elem segítségével történik ezen belül a térkép nevét a name paraméterrel kell megadni. A hivatkozásként szolgáló területet ezen belül, az <area> elemmel jelöljük ki. A hivatkozott oldalt itt is a href paraméterrel adjuk meg, mint a közönséges hivatkozásnál. A shape paraméterben azt adhatjuk meg, hogy milyen alakú legyen a hivatkozásként szolgáló terület: sokszög (poly), kör (circle) vagy négyzet (rect). A coords paraméterben meg kell adni a kijelölt terület fő adatait. Sokszög esetében ez nem más, mint a sokszög szögeinek koordinátái (tehát egy számsor, amely mindenképp páros számú elemet tartalmaz), kör esetében a kör középpontjának koordinátája és a kör sugara (tehát három szám), négyzet esetében a négyzet két átellenes sarka (tehát négy szám). A legegyszerűbb, ha a képet megnyitjuk egy olyan képszerkesztővel, amely folyamatosan mutatja, hogy az egérmutató a kép mely pontja felett áll. Így könnyen feljegyezhetjük a szükséges koordinátákat, és beírhatjuk őket HTML-forrásunkba. Ha leírásunk bonyolultnak tűne, nézzük meg egy példán, milyen egyszerű az egész:
<map name="geometria">
<area href="harmsz.htm" shape=poly coords="10, 10, 25, 40, 40, 10">
<area href="negyz.htm" shape=rect coords="60, 10, 90, 40">
<area href="kor.htm" shape=circle coords="125, 25, 15">
</map>
A koordinátákat nem csak képpontokban, hanem százalékban is megadhatjuk. Ilyenkor a számok után százalékjelet kell írni. Ez a megoldás azért jó, mert ha egyszer elkészítettük a térképet, az akkor is használható, ha a képet átméretezzük.
Feladat
1. A 8. fejezetben elkészítettünk egy oldalt, melyen kedvenc lapjainkra való hivatkozások voltak. Írjuk át ezt az oldalt úgy, hogy a lehető legtöbb lapot egy képre való kattintás nyisson meg! (Ehhez az oldalakról csenjünk egy-egy jellegzetes képet!)
2. Készítsünk el egy oldalt, melyen barátaink vagy családtagjaink fényképe látható. Készítsünk hozzá térképet, melynek segítségével fejükre kattintva a legfontosabb információk jelennek meg róluk!
3. Szerezzünk egy fényképet, melyen egyszerre több nevezetes épület található. Az épületekre kattintással az olvasó kapjon információkat az adott épületről. (Ha nem sikerül megfelelő fényképet szereznünk, készítsünk térképvázlatot (pl. a lakóhelyünk közelében található nevezetességekről, egy köszeli múzeum termeiről), és ennek különböző pontjaira kattintva kapjon információt az olvasó arról, hogy ott mit láthat.