Képek kezelése
Nagyon csábító, hogy a weboldalaidon sok képet használj. A képekkel nagyszerűen lehet befolyásolni az oldal hangulatát, és az illusztrációkon keresztül könnyen be lehet mutatni komplex információkat is a látogatóknak.
A képek legnagyobb hátulütője a weben az, hogy nem minden webes felhasználó látja őket. Annak idején, amikor a képeket először kezdték támogatni a böngészők, nagyon sok látogató kikapcsolta a képek megjelenítését, hogy ezáltal sávszélességet spóroljon, és gyorsabban böngészhessen — az internetkapcsolatok akkoriban még nagyon lassúak voltak, és minden percért fizetni kellett, amit online töltöttél. Habár ez a mai időkben már nem jellemző, még mindig nem értünk ki az erdőből — elég, ha csak néhány példát említek:
-
Azok, akik mobil eszközökön böngésznek, könnyen lehet, hogy most is kikapcsolják a képeket a kis képernyő miatt, és azért, mert gyakran a letöltött adatmennyiség után kell fizessenek.
-
A látogatóid között lehetnek vakok és gyengénlátók, akik egyáltalán nem, vagy csak nagyon rosszul látják a képeidet.
-
Lehetnek olyan látogatóid is, akik egy másik kultúrkörből származnak, és nem értik meg az általad használt képi jelek valódi jelentését.
-
A keresőmotorok csak a szöveget indexelik — nem analizálják a képeket (egyelőre), ami azt jelenti, hogy minden olyan információ, amit a képekben tárolsz, nem lesz indexelve, és így nem fogják megtalálni a keresőben.
A képek beillesztésének egyszerű módja az -img- tag használata. Tegyük fel, hogy van egy "peter.jpg" nevű fájlunk ugyanabban a könyvtárban/mappában, mint a HTML fájl. A kép 200 képpont széles és 150 képpont magas.
img src="/peter.jpg" width="200" height="150"
IMG ALIGN="függőleges igazítás"
SRC="elérési_út/fájlnév.kit"
HSPACE="vízsz.távolság a szövegtől"
VSPACE="függ. távolság a szövegtől
"WIDTH="szélessége pixelben"
HEIGHT="magassága pixelben"
ALT="helyettesítő, ismertető szöveg"
Az src attribútum a képfájlt nevezi meg. A szélesség és a magasság megadása nem feltétlenül szükséges, de segíthet a weblap megjelenítési sebességének javításában. Azoknak, akik nem láthatják a képet, szükségük van egy leírásra, melyet a kép megtekintése helyett elolvashatnak. A következőképpen adhatunk egy rövid leírást a képhez:
-
Ha a kép lényeges része a dokumentum tartalmának, például egy kép a szerzőről, vagy egy grafikon különböző adatokkal, akkor
imgelemként kell hozzáadni, egy alternatív szöveg megadásával együtt. -
Ha a kép csak dekoráció, akkor használd a CSS háttérképeit. Ennek az oka, hogy az ilyen képeknek nem kell adni alternatív szöveget (mi haszna egy vak számára annak, hogy „lekerekített, csillogó zöld sarok”?), ráadásul sokkal több lehetőséged van a képek stílusozására CSS-ben, mint HTML-ben.
Ha ezt a kódot megnyitod a böngészőben, akkor az ábrán látható eredményt fogjuk kapni.
Ez a kód szépen megjeleníti a képünket, viszont a HTML érvénytelen lesz, mivel az img elemben meg kell adni az alt attribútumot is. Ez az attribútum tartalmazza azt a szöveget, ami a kép helyén jelenik meg, ha a kép valamilyen okból nem elérhető. Ennek több oka is lehet, például nem található a kép a megadott helyen, nem lehet betölteni, vagy a kliens eszköz (ami általában a böngésző) nem támogatja a képeket. Továbbá, a látássérült emberek általában valamilyen kisegítő technológiát használnak a böngészéshez, ami felolvassa nekik a lapokat; ezek a technológiák pedig az img elem esetén éppen az alt attribútum szövegét olvassák fel a felhasználónak. Éppen ezért nagyon fontos, hogy jó alternatív szöveggel írjuk le a kép tartalmát, és ezt az alt attribútumba tegyük.
A weben sok olyan szöveget találhatsz, amelyben az „alt tagekről” beszélnek. Ez valójában hibás, mivel nincs ilyen nevű tag (vagy elem). Ez az img elem egy attribútuma, és rendkívül fontos szerepe van mind a hozzáférhetőségben, mind a keresőoptimalizálásban (SEO).
Az alt attribútum azt a szöveget tartalmazza, amely akkor jelenik meg, ha a kép nem elérhető. Az alt attribútumban található információ nem szabad megjelenjen akkor, ha a képet sikerült betölteni és megjeleníteni; ennek ellenére az Internet Explorer ezt másképp gondolja, és egy eszköztippben megjeleníti a szöveget, ha az egeret a kép fölé viszed. Ez valójában egy hiba, ami rengeteg embert arra késztetett, hogy további információkat fűzzön a képhez az alt attribútum segítségével. Ha ezt szeretnéd elérni, akkor használd helyette a title attribútumot, amelyet mindjárt be is mutatunk. A legtöbb böngésző az img elem title attribútumának értékét egy eszköztippben jeleníti meg, ha az egeret a kép fölé viszed. Ennek segítségével a látogató többet is megtudhat az adott képről, de nem feltételezheted azt sem, hogy minden látogatódnak van egere. A title attribútum nagyon hasznos lehet, de ez a módszer nem biztonságos kritikus információk megadása esetén. Nagyon hasznos viszont például akkor, ha a kép hangulatáról akarunk írni, vagy hogy mit jelent ez a kép az adott kontextusban
Ha ezt a kódot betöltöd a böngésződbe, és a kép fölé állsz az egérrel, akkor az ábrán látható eredményt fogod kapni:
Ha a kép nagyon összetett, mint például egy grafikon, akkor adhatsz hozzá egy sokkal hosszabb leírást is a longdesc attribútum segítségével, így a képernyő-felolvasó szoftver használó látogatók, vagy akik képek nélkül böngésznek továbbra is pontosan elérhetik azt az információt, ami egyébként csak a képen látható.
Ez az attribútum egy olyan URL-t tartalmaz, amely a képben található információkat tartalmazó dokumentumra mutat. Például ha a grafikon egy adathalmazt jelenít meg, akkor a longdesc segítségével hivatkozhatsz arra az adattáblára, amely alapján a grafikon készült
A gyumolcsfogyasztas.html egy nagyon egyszerű adathalmazt tartalmaz, amely ugyanezt az információt jeleníti meg
Az adatok kétféle megjelenítését egymás mellett az ábrán láthatod:
Annak, hogy egy képhez hozzá van rendelve egy részletes leíró dokumentum, nincs semmilyen vizuális jelölése. A kisegítő technológiák viszont tudatni fogják a felhasználóikkal, hogy elérhető egy alternatív leírás is a képhez. Képeket sokféleképpen készíthetünk, például digitális fényképezőgéppel, szkennerrel, esetleg egy festő- vagy rajzolóprogrammal. A legtöbb böngésző meg tudja jeleníteni a GIF és JPEG formátumú képeket, az újabb böngészők pedig a PNG formátumot is értelmezni tudják. A hosszú hálózati letöltést elkerülendő, mellőzzük a nagyméretű képfájlok használatát.
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"- ... -/MA-P
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 -ARE- 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:
|
| 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:
|