Képek elhelyezése a HTML dokumentumban

A HTML formátumú dokumentumban képeket - grafikákat - is elhelyezhetünk. Az <IMG SRC="elérési_út/fájlnév.kit"> utasítás a szöveg aktuális pozíciójába helyezi a megadott képet.

Ennél azért a legegyszerűbb szövegszerkesztő program is többet nyújt. A HTML dokumentum csinosítására is vannak a képek elhelyezésének finomabb lehetőségei is. Ha ezeket mind kihasználjuk, akkor az utasítás a következőképpen fog kinézni: <IMG ALIGN="hely" SRC="elérési_út/fájlnév.kit" HSPACE="vszám" VSPACE="fszám" WIDTH="szméret" HEIGHT="mmeret" UNITS="egység" USEMAP="#jelző" ISMAP ALT="szöveg">.

Az ALIGN opció meghatározza a kép igazításának módját, lehetséges értékei: top, middle, bottom, left, right.

A HSPACE a kép melletti vízszintes térközt, a VSPACE pedig a függőleges térközt (ha úgy tetszik: margókat) határozza meg.

A WIDTH a szélességét, a HEIGHT pedig a magasságát adja a képnek, az UNITS által meghatározott egységben (pixel vagy en).

Az ALT azt a szöveget adja meg, amelyet nem grafikus böngészők használata esetén meg fog jelenni a kép helyett.

Az USEMAP, ISMAP összetartozó opciók a kép különböző területeihez különböző hipertext hivatkozásokat rendelhetnek. (Tehát csak akkor van értelmük, ha a kép egy hivatkozás része! Ekkor a hivatkozások <A HREF=...> és </A> utasításpárját nem kell megadni.) Ezenkívül szorosan kapcsolódik ezen opciókhoz (az <IMG> utasítást megelőzően) a következő utasításstruktúra:

<MAP NAME="jelző">

<AREA SHAPE="alak" COORDS="koordináták" HREF="hivatkozás">

. . .

</MAP>

amellyel egy hivatkozási térképet kell megadni. Az <AREA> utasításból természetesen több is szerepelhet. A SHAPE opció a circle, rect, polygon értékeket veheti fel, amikor circle (kör) esetén a COORDS három vesszővel elválasztott koordinátát tartalmaz (középx,középy,sugár), rect (téglalap) esetben négyet (balfelsőx,balfelsőy,jobbalsóx,jobbalsóy), a polygon (sokszög) esetén pedig minden csúcs koordinátáit meg kell adni. A <MAP NAME="jelző">, </MAP> utasításpárral körülhatárolt hivatkozási rész külön fájlban is elhelyezhető. Ekkor az USEMAP opció kimarad. - Vigyázat az ISMAP nem marad el! - Helyette a <A HREF="fájlnév.map"> és az </A> utasítások közé kell zárni az <IMG SRC=...> utasítást. (Ahol a fájlnév.map annak a fájlnak a neve, URL-je, amely a hivatkozásokat tartalmazza.)

Az alábbi példa ugyanazon kép elhelyezésére több variációt tartalmaz (az itt szereplő példában a példadokumentum szövegei rövidítve szerepelnek):

   <MAP NAME="osztott">
   <AREA SHAPE="circle" COORDS="130,130,50" HREF="#vege">
   </MAP>
   Makó város címere szövegbe beszúrva
   <IMG SRC="k10.gif" ALT="Makó címere" USEMAP="#osztott" ISMAP>
   így jelenik meg ...
   <P>
   <HR>
   <P>
   <IMG ALIGN="right" SRC="k10.gif" WIDTH="100" ALT="...">
   Ugyanez jobbra igazítva és arányosan kicsinyítve ...
   <P>
   <IMG ALIGN="left" SRC="k10.gif" VSPACE=20 HEIGHT="100" ALT="...">
   Ugyanez balra igazítva és arányosan kicsinyítve ...
   <P>
   <HR>
   <P>
   <IMG ALIGN="top" SRC="k10.gif" HSPACE=40 WIDTH="100" ALT="...">
   Ugyanez a szöveg felső széléhez igazítva ...
   <P>
   <IMG ALIGN="middle" SRC="k10.gif" WIDTH="100" HEIGHT="100" UNITS="en" ALT="...">
   Ugyanez sorközépre igazítva, valamint ...
   <P>
   <IMG ALIGN="bottom" SRC="k.gif" WIDTH="200" HEIGHT="100" UNITS="pixel" ALT="...">
   Ugyanez a sor alsó széléhez igazítva, valamint ...
   <P>
   <A NAME="vege">VÉGE</A>

[Lapozás vissza] [Tartalomjegyzék] [Lapozás tovább]