Képek elhelyezése a HTML dokumentumban

A HTML formátumú dokumentumban képeket - grafikákat - is is elhelyezhetünk. Az <IMG SRC="elérési_út/fájlnév.kit"> utasítás a szöveg aktuális pozició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):

hullámvonal

        <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]