Linkek, hivatkozások szerkesztése

Egy HTML oldal nem is létezhetne linkek nélkül. Az egész HMTL programozás alapját ezek képezik. Segítségükkel a felhasználó egy egyszerű kattintással mozoghat a nagy terjedelmű honlap több oldala között. A hivatkozásoknak külsőségeik alapján kettő, működésük alapján három fajtája van. Külsőségek szerint a linkek lehetnek szövegesek, de lehetnek képek illetve azok bizonyos részei is ( Image Map ). Működés tekintetében vannak olyanok, melyek egy másik fájlra, dokumentumra mutatnak, vannak, amik a dokumentum egy adott részére és vannak, melyek egy másik dokumentum adott részére viszik a látogatót. Szerkesztésük természetesen elnevezésüknél jóval egyszerűbb. A linkeket az <A> és a </A> parancsok közé kell beírnunk. Az <A> tag kötelező opciója a HREF="hivatkozott oldal.htm". Az értéke természetesen a hivatkozás működésének megfelelően változik: lehet "#azonosító", "oldal.htm" illetve "oldal.htm#azonosító".
A link tag szokványos tulajdonságai:

   HREF="célfájl" - A már megismert funkcióval rendelkezik.
   TARGET="megjelenítés helye" - A hivatkozott oldal megjelenítésének helyét, módját adja meg. Értékei: "_blank", "_top", "_parent" és "keret azonosítója". A "_top" esetén minden keret felülíródik, "_blank" esetén egy teljesen új böngészőablakban jelenik meg a linkelt dokumentum. A "_parent" keretek esetén a "szülőkeret - anyakeret" ablakába, a "keret azonosítója" esetén az adott keretbe (frame-be) töltődik be az oldal. ( Bővebben a Keretek használata fejezetben! )
   onMouseOver="JavaScript parancs(ok)" - Egér a link felett JavaScript esemény bekövetkezésekor elvégzendő utasítások szerkesztője.
   onMouseOut="JavaScript parancs(ok)" - Szorosan összefügg a fentebbivel, az Egér elhagyta a linket esemény kezelője.
   onClick="JavaScript parancs(ok)" - Az Egérklikkelés eseményt kezeli, hatása hasonló a HREF opció hatásához. (Ez utóbbi háromról a HTML és a JavaScript fejezetben bővebben szó lesz.)

Amikor tehát egy másik HTML fájl legelejére szeretnénk ugrani, az <A HREF="másik.htm"> utasításra van szükségünk. Ha a már betöltött oldal egy adott pontjára szeretnénk ugrani, akkor egy <A HREF="#azonosító"> -hez hasonló parancsot használunk. Ekkor azonban szükség van még egy azonosítóra is, mellyel a meglinkelt szövegtöredéket azonosítani akarjuk. Ez <A NAME="azonosító">Azononsítani kívánt szövegtöredék</A> alakú.
A legbonyolultabb esetben egy fájl meghatározott részére szeretnénk a felhasználót eljuttatni, ilyenkor az <A HREF="másik.htm#azonosító"> sort alkalmazzuk. Ez még önmagában kevés, ugyanis a fentebb leírtakhoz hasonlóan itt is kell a hivatkozott fájlnak egy <A NAME="azonosító">Szövegtöredék </A> részt tartalmaznia. (Lásd a példát!)
A linkeknek van még néhány speciális fajtája is. Ezek közül talán a legfontosabb az E-mailt küldő hivatkozás. Ezt a típust a HREF="mailto:e-mail cím" utasítással valósíthatjuk meg. Persze ftp, gopher és wais típusú címekhez is vezethet link, ezeket mindig a kívánt cím elé kell beírni, attól egy kettősponttal és két perrel ( // ) elválasztva. Például egy ftp cím szintaxisa: HREF="ftp://www.szerver_neve.hu". Alapértelmezésben a linkek a http protokollt használják ("http://www.interetcim.hu"), ennek ellenére azt is kötelező megadni.
A böngészők többsége a linkeket aláhúzással jelöli, ettől általában csak a StyleSheet használatával szabadulhatunk meg. Erről a módszerről a későbbiekben lesz szó. A hivatkozások további formázása a <BODY> tagban opciók formájában (is) lehetséges. Ezeket a színekre vonatkozó formázásokat az Egy oldal felépítése fejezet magyarázza. A többi szövegformázó utasítás (, , <S> stb.) érvényes a linkekre is.
A hivatkozások másk fajtája a képlink, amely nem egy szövegrész, hanem egy kép (vagy animáció) hivatkozásként működését jelenti. Ekkor az <A HREF="..."> parancs és zárópárja közé odakerül a kép információit hordozó tag, vagyis egy <IMG SRC="kép/animáció">, illetve ehhez hasonló utasítássor.
A Képek beillesztése fejezetben szóba került a képhivatkozások egy különleges fajtája, mely az úgynevezett Image Map eljárást foglalja magába. Ez azt jelenti, hogy képünkről egy térképet kell készítenünk, jelölve rajta a hivatkozásokat: pontosan meghatározva azok koordinátáit. Elsőre nagyon bonyolultan hangzik, de nem az. El kell döntenünk, milyen alakú hivatkozást szeretnénk létrehozni, majd pedig ennek koordinátáit a kép bal felső sarkától számítva meg kell adnunk: téglalap alak esetén négy, kör esetén három, sokszög esetén a szögszámnak megfelelő számú pontkoordinátával dolgozunk. Egy példán keresztül mindjárt egyszerűbb lesz. Előbb azonban lássuk magát a kódot!
A helyesen beillesztett kép utasításának az SRC kötelező parancson kívül mappeléskor mindenképpen tartalmaznia kell egy USEMAP="#map_azononsito" részt is. Ez adja meg, milyen néven keresendő a koordináták beállítása. Az erre vonatkozó részt a <MAP> és a </MAP> utasítások tartalmazzák, rendszerint célszerű ezt a blokkot a kép tagje elé helyezni. A <MAP> parancs kötelező opciója a NAME="azonosító", melyben a koordináta-információk azonosítóját kell megadnunk (erre hivatkozik az USEMAP, esetünkben ez az azonosító "map_azonosito"). Vegyük észre, hogy az USEMAP sorban kettős kereszt (#) áll az azonosító előtt, mely a MAP NAME sorban hiányzik.
A <MAP> és a </MAP> tagek közé kell kerülnie egy <AREA> parancsnak, melyet egy </A> zár (a kettő közé nem kerül semmi). Ennek opciói:

   SHAPE="alak" - A képen szereplő hivatkozás alakját határozza meg, lehetséges értékei: "rect" (téglalap), "polygon" (sokszög), "circle" (kör).
   COORDS="koordináták" - A SHAPE paranccsal választott alak koordinátáit kell megadnunk itt, egymástól vesszővel elválasztva. Téglalap esetén négy (bal felső és jobb alsó csúcsok két-két koordinátája), kör esetén három (középpont két koordinátája és a sugár hossza pixelben), sokszög esetén a szögszámnak megfelelően szögenként két-két koordinátára van szükség. Ezek a kép bal felső sarkától mérendők. (Célszerű a koordináták kiszámításához erre készült Image Mapper programot használni; a IV. függelék szolgáltat ehhez ötleteket.)
   HREF="célfájl" - Rendeltetése a korábban megismerttel egyezik.
   NOHREF - Az előbbi parancs tagadása, amennyiben a megadott linknek nem kell mutatnia sehova.
   TARGET="megjelenítés helye" - Funkcióját lásd fentebb!
   ALT="megjelenő szöveg" - A képeknél megismert jelentőséggel bír.
   onMouseOver="JavaScript parancs(ok)" - Bővebben a HTML és a JavaScript fejezetben.
   onMouseOut="JavaScript parancs(ok)" - Bővebben a HTML és a JavaScript fejezetben.
   onClick="JavaScript parancs(ok)" - Bővebben a HTML és a JavaScript fejezetben.

Az <AREA SHAPE="alak"> parancsnak van még egy lehetséges értéke, mégpedig a "default". Ez a kép koordináták által (a COORDS opcióban) meg nem határozott részét jelöli. Ha a felhasználó a kép le nem fedett részére kattint, az itt megjelölt parancsok hajtódnak végre. Ebben a sorban egyébként leggyakrabban a NOHREF utasítás szerepel.

<html>
 <head>
 <title>Linkek, hivatkozások szerkesztése - Példa</title>

 </head>

<body bgcolor="black" text="lightyellow" link="lightblue" vlink="lightgreen" alink="red">
<h2 align="center">BODYban színezett linkek</h2>
 
<a href="lesson07.htm" target="_parent">lesson07.htm a "szülőablakban"</a>
 
<a href="lesson07.htm#azonosito">lesson07.htm adott része</a>
 
<a href="exampl05.htm" target="_blank">Félkövér dőlt link, a példa egy új ablakban</a>
 
A lesson07.htm fájl adott része új ablakban, képlinkkel
 <a href="../lesson07.htm#azonosito" target="_blank"><img src="../kep.jpg" alt="A második linkhez hasonlót művel" border="1"></a>
 
A speciális képlink, Image Map-pel
<map name="map_azonosito">
 <area shape="rect" coords="12,6,64,24" href="../lesson07.htm" alt="Image Map 1" target="_blank"></a>
 <area shape="circle" coords="40,54,22" href="../lesson07.htm#azonosito" alt="Image Map 2" target="_blank"></a>
 <area shape="default" nohref>
</map>
 <img usemap="#map_azonosito" src="../kep.jpg" border="1">

</body>
</html>

Példadokumentum
Következő fejezet
Vissza az előző oldalra
Vissza a főoldalra