Az Internet történetének korai szakaszában még egyáltalán nem voltak jellemzőek a képek a HTML-oldalakon. Az oldalak többsége karakteres jellegű volt, és lehetőleg minél kevesebb képi információt tartalmazott a gyorsabb letöltés érdekében. Manapság ezzel ellentétes tendencia látszik kialakulni, a Web-et elárasztották a képek. Tehát a képekkel való foglalatoskodást nemigen lehet elkerülni, de alapvető szabály, hogy csak annyi képek tegyünk fel oldalunkra amennyi feltétlenül szükséges, hogy kifejezzük mondanivalónkat. Több okból sincs értelme a saját arcképünk több megabájtos képével teletűzdelni az oldalt: egyrészt ha pl. egy 56K-s modemmel rendelkező felhasználónak kb. 30 másodpercnél többet kell várnia a letöltésre valószínűleg nem fogja megvárni, másrészt egy idő után elég giccses lesz az oldal, harmadrészt pedig nem biztos, hogy az egész világ a mi arcunkra kíváncsi. Ezért lehetőleg csak annyi és olyan képet használjunk, ami elősegíti oldalunk tartalmának kifejezését.

   Nos ezek után rátérhetünk a képek használatának tárgyalására. Egy kép beszúrását az <IMG> taggal tehetjük meg.

<IMG> Kép beszúrása

Az <IMG> elem egy grafikát tartalmazó állományból képet szúr be a szövegbe. Több olyan képformátum van, amelyek HTML-dokumentumokban használhatók. Ezek:

  • GIF - Graphics Interchange Format (.gif)
  • JPEG - Joint Photographic Experts Group (.jpg, .jpeg)
  • PNG - Portable Network Graphics(.png)
  • BMP - Windows Bitmap (.bmp - csak az Internet Explorer támogatja)
  • X-bitmap (.xbm, .xpm)

A dokumentumokban ahol szöveg van, ott lehet kép is. A <PRE> elem az egyedüli, ahol ez nem igaz, ezen belül az <IMG> nem használható. A képek hivatkozásban is használhatók, és működhetnek nyomógombként (ImageMap) is.

Paraméterei:

ALIGN
(igazítás) - opcionális paraméter. Az ALIGN azt határozza meg, hogy a szövegbe behelyezett grafika, kép hogyan illeszkedik a környező szöveghez. A lehetséges értékei: "left" (bal margó), "right" (jobb margó), "top" (sorban lévő legmagasabb elem teteje), "texttop" (sorban lévő legmagasabb szöveg teteje - ez nem mindig esik egybe a legmagasabb elem tetejével), "middle" (a sor alapvonalát a grafikus ablak közepéhez illeszti), "absmiddle" (a sor közepét a grafikus ablak közepéhez illeszti), "baseline" (a grafikus ablak alját az adott sor alapvonalához illeszti), "bottom" (a grafikus ablak alját a legalacsonyabb karakterhez illeszti a sorban), "absbottom" (a grafikus ablak alját a sor legalsó pontjához illeszti).
ALT
(szöveges helyettesítés) - opcionális paraméter. Az ALT paraméter szöveges alternatívát kínál a nem grafikus megjelenítő programok számára. Ekkor a kép helyett a karakteres programokban ez a szöveg jelenik meg, így ezen programok felhasználói sem veszítenek el semmilyen információt. Ezen túl, több grafikus megjelenítő programban a képek betöltése késleltethető, így az ALT-ban megjelenő szöveg segíthet eldönteni, hogy érdemes-e betölteni a képet vagy sem.
BORDER
(keret) - opcionális paraméter. Segítségével lehetőség van a grafikus elemet körbevevő keret vastagságának szabályozására akkor, ha ez elemben szerepel.
CONTROLS
(vezérlés) - opcionális paraméter. Az paraméter segítségével videó állomány lejátszásakor a kezelőgombok megjelentethetők a képernyőn.
DYNSRC
(dinamikus forrás) - opcionális paraméter. Megadja a lejátszható videoállománynak vagy VRML-állománynak a nevét.
HEIGHT
(magasság) - opcionális paraméter. Megadja a grafikus elem magasságát képpontban (pixelben). Ha megadunk HEIGHT értéket, akkor a böngésző program ekkora magassággal fogja a képet megjeleníteni, vagyis kellőképpen összenyomja vagy széthúzza. Ha akkorában akarjuk a képet megjeleníteni, mint amekkora, akkor jobban járunk ha nem adjuk meg.
HSPACE
(oldalköz) - opcionális paraméter. Megadja, hogy a grafikus elem mellett hány képpont távolságra kezdődhet a következő elem (grafika, szöveg).
ISMAP
(aktív grafika) - opcionális paraméter. Az ISMAP olyan képeket, grafikákat jelöl, ahol a kép egyes darabjaihoz különböző akciókat rendelünk. Amikor az egérrel egy ilyen kép egy darabjára visszük a nyilat és megnyomjuk az egér gombját, akkor a megjelenítő program a kép bal felső sarkához viszonyított koordináta-értékeket elküldi a szervernek további feldolgozásra.
LOOP
(ciklus) - opcionális paraméter. Azt szabályozza, hogy a betöltés után a videó állományt hányszor játssza le a program. Ha értéke -1, vagy INFINITE (végtelen), akkor mindaddig ismétli a lejátszást, amíg a felhasználó új oldalt nem választ. Alapértelmezése: LOOP=1.
SRC
(forrás) - kötelező paraméter. A grafikus állomány URL-jét adja meg.
START
(indítás) - opcionális paraméter. Megadja, hogy a DYNSRC para- méterben megadott állományt mikor kell lejátszani. Lehetséges értékei: FILEOPEN (állomány megnyitásakor); MOUSEOVER (amikor az egér mutatója az SRC állományban megadott grafikus elem felett van)
USEMAP
(térkép név) - opcionális paraméter. A képet ügyfél oldali térképnek értelmezi és az ennek megfelelő nevű MAP utasításban megadott alakzatokat és koordinátákat használja fel arra, hogy a felhasználó választásának megfelelően a kép egyes részeihez milyen URL-kapcsolatokat rendeljen. A MAP neve elé egy # jelet kell elhelyezni.
VSPACE
(függőleges köz) - opcionális paraméter. Megadja, hogy a grafikus elem alatt és felett hány képpont távolságra kezdődhet a következő elem (grafika, szöveg).
WIDTH
(szélesség) - opcionális paraméter. Megadja az grafikus elem szélességét képpontban (pixelben). Ha megadunk WIDTH értéket, akkor a böngésző program ekkora szélességben fogja a képet megjeleníteni, vagyis kellőképpen összenyomja vagy széthúzza. Ha akkorában akarjuk a képet megjeleníteni, mint amekkora, akkor jobban járunk ha nem adjuk meg.
LOWSRC
(kis felbontású kép) - opcionális paraméter. A LOWSRC segítségével lehetőség van arra, hogy két képet ugyanazon a helyen jelenítsünk meg. A betöltés során az oldallal együtt a LOWSRC-ben megadott képet tölti be. Amikor minden egyéb elemet, képet, grafikát a helyére rakott, akkor kezdi el az SRC-ben megadott kép betöltését. Ennek az az előnye, hogy az első kép az eredetinél jóval kisebb felbontású lehet, így a megjelenítése kevesebb adat átvitelét, és rövidebb időt igényel. Ha az olvasó még tovább marad akkor megnézheti a nagyfelbontású képet is.
LOOPDELAY
(ciklus késleltetés) - opcionális paraméter. Azt szabályozza, hogy a videó állomány két lejátszása között mennyi idő teljen el. Az időértéket ezredmásodpercben kell megadni.




   Ha már képeket lehet elhelyezni a HTML-oldalakon, akkor elég nyilvánvalóan felmerül arra is az igény, hogy hivatkozásként is használhassuk őket. Vagyis ha rákattintunk a képre, akkor hiperlink kapcsolatok hozhassunk létre egy másik dokumentummal vagy képpel. Ezt az ezelőt már ismertetett két HTML-elem segítségével könnyen megtehetjük. Nem kell mást tennünk, csak egy hivatkozást és egy képet elhelyező HTML utasítást egymásba kell ágyaznunk, a következőképpen:

<A HREF="http://www.gep.hu/index.html"><IMG SRC="http://www.gep.hu/kakadu.gif></A>

   Ennyi az egész, már kattinthatunk is a képre...



   Sokszor bonyolultabb igények is felmerülnek annál, semmint egy egyszerű linket helyezzünk el egy képen. Például előfordulhat, hogy azt szeretnénk, ha egy képen több hivatkozás is lenne. Mégpedig úgy, hogy a kép egy bizonyos területe lenne egy hivatkozás, egy másik része pedig egy másik. Vagyis különböző dokumentumokra juthatunk el, ha a kép különböző területeire kattintunk. Ezt nyilván úgy szeretnénk megvalósítani, hogy a kép adott területén látható dolog összefüggésben legyen az általa hivatkozott dokumentummal. Ennek a problémának a megoldására találták ki az ImageMap-okat. Az ImageMap-ok (képtérkép-nek fordíthatnánk, de nem tesszük...) készítése tulajdonképpen az képen való hivatkozás elhelyezésének továbbfejlesztett változata.
   Az ImageMap-ok készítéséhez használnunk kell a fentebb tárgyalt <IMG> elem USEMAP nevű paraméterét:

<IMG SRC="../kepek/kakdu.gif" USEMAP="#mapnév_1">

   Ezután a <MAP> elem használatával definiálnunk kell az <IMG>-ben megadott nevű ImageMap-ot, a következőképpen:

<MAP NAME="mapnév_1">...</MAP>

   A <MAP> elem csak az ImageMap-ot definiálja, az egyes képen levő területeket a <MAP> elembe ágyazott <AREA> elemekkel kell megadni:

<MAP NAME="mapnév_1"><AREA SHAPE="rect" COORDS="0,0,50,150"> <AREA SHAPE="...></MAP>

   A fenti példát a következőképpen kell értelmezni: Az <AREA> elem SHAPE (alak) paramétere határozza meg a linkelni kívánt terület alakját, jelen esetben "rect", azaz rectangle (téglalap). A COORDS paraméter határozza meg a téglalap koordinátáit, az első két szám a téglalap bal felső, a második kettő a jobb alsó sarkát jelenti.
   Az <AREA> tag csak a <MAP> elemben szerepelhet. Ha azonos felosztású képeink vannak, használhatunk közös MAP-ot is, több különböző képhez.

<MAP> Kép-térkép

   A hivatkozásra használt grafikai elemek egyes részleteihez az alakzatnak és a koordinátáknak a megadására használatos.

Paraméterei:

NAME
név - kötelező paraméter. Az <IMG> elem USEMAP paraméterében megadott nevet viselő definició alapján lehet egy grafikus elem részeihez kapcsolódó dokumentumokat rendelni.

<AREA> Terület

   A képek adott területekre való felosztásához, a kijelölt terület alakjának és koordinátáinak megadására szolgál az <AREA> elem. Téglalap, kör és sokszög alakú területkijelölések használhatók, és ezekhez rendelhető egy-egy URL. Egy képhez tetszőleges számú kapcsolati terület definiálható. A TARGET paraméter használatát, ami egy keretnek, vagy célterületnek a címzésére szolgál, csak a Netscape és az Internet Explorer támogatja.

Paraméterei:

COORDS
(koordináták) - kötelező paraméter. Lehetséges beállítását lásd a SHAPE paraméternél!
HREF
(hivatkozás) - opcionális paraméter. Az előre definiált területre kattintva az egérrel, a paraméterben megadott dokumentum töltődik be, illetve a megadott parancs hajtódik végre.
NOHREF
(nincs hivatkozás) - opcionális paraméter. Azt jelzi, hogy az alakzatokkal le nem fedett területekre való kattintás nem eredményez semmilyen akciót.
SHAPE
(alak) - opcionális paraméter. A lehetséges értékei: "rect" (téglalap), ekkor a COORDS paraméter a bal felső és a jobb alsó sarok x, illetve y koordinátáit adja meg; "circle" (kör), ilyenkor COORDS paraméter a középpont x és y koordinátáit, valamint a sugarat adja; "polygon" (sokszög) a COORDS az egymást követő sarokpontok x és y koordinátáit tartalmazza. A "default" az egyéb alakzatokkal le nem fedett területeket kezeli.
TARGET
(célterület) - opcionális paraméter. Segítségével a térkép hivatkozása kereteket használó dokumentummal kapcsolható össze.

 




A példák megtekintéséhez, klikkelj az ikonra:
(A Dreamweaver iconra kattintva megláthatjuk mennyire egyszerű a kép pontos illesztése  Segítség a Dreamweaverben.)

A forráskód megtekintéséhez meg erre az ikonra: