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.
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.
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. |
|
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 .)
A forráskód megtekintéséhez meg
erre az ikonra:
|