Obrazky sa vkladaju pomocou elementu IMG. Atribut SRC obsahuje URL k obrazky, ktory sa ma zobrazit. Prezerace zvacsa poznaju iba formaty GIF a JPEG (JPG).


<IMG SRC="images/lion.gif">

Co ak si niekto prezera vasu stranku na textovom prezeraci? Obrazky nebude vidno (ved ako aj). Lahka pomoc. Da sa doplnit atribut ALT, ktoreho obsah tvori text zobrazovany prave textovymi prezeracmi.


<IMG SRC="images/lion.gif" ALT="[ Lev ]"> [ Lev ]

Ak su obrazky napriklad v tabulke alebo inde, prezerac casto caka az pokial sa obrazok nenatiahne cely a az potom ho vykresli. Tato jeho cinnost dost spomaluje vykreslenie stranky (a hlavne jej informacneho obsahu), co moze prinutit pripadneho pouzivatela aby sa pobral kade lahsie :-) Da sa to obist tym ze prezeracu vopred oznamime ake budu rozmery obrazku. To mu umozmi vynechat dostatocne miesto na obrazovke a necakat na natiahnutie celeho obrazku. Sirka zobrazovaneho je dana atributom WIDTH a vyska atributom HEIGHT. Hodnoty obidvoch atributov su dane v pixeloch.



Ukazky roznych pozadi

Ak je obrazok sucastou hypertextvej linky, prezerac ho zvycajne obkresli ramcekom, hrubka ramceka je dana atributom BORDER a udava sa v pixeloch. BORDER=0 sposobi ze sa ramcek nevykresli.
Vsetky linky su aktivne a referencuju dokument examp_TITLE_2.html, ktory ma prazdne telo.


Chcete vediet co je <A HREF="examp_TITLE_2.html"> <IMG SRC="images/new.gif" ALT="* Nove *"> </A>? <BR> Chcete sa nieco dozvediet o <A HREF="examp_TITLE_2.html"><IMG SRC="images/lion.gif" ALT="[ Lev ]"></A>?
Chcete vediet co je * Nove * ?
Chcete sa nieco dozvediet o [ Lev ]?

Teraz priklad s ramcekom, ktoreho hrubku zmenime:

Chcete sa nieco dozvediet o <A HREF="examp_TITLE_2.html"> <IMG SRC="images/lion.gif" ALT="[ Lev ]" BORDER=5> <!- ramcek hruby 5 pixelov --> </A>?
Chcete sa nieco dozvediet o [ Lev ] ?

Vsetky obrazky sa daju zarovnavat roznymi sposobami. Dosiahneme to pridanim atributu ALIGN, ktory moze mat tieto hodnoty:

left
zarovnanie k lavemu okraju
right
zarovnanie k pravemu okraju
top
zarovnanie k hornemu okraju riadka
middle
zarovnanie na stred riadka
bottom
zarovnanie na dolny okraj riadka (standardne)

<P> <IMG SRC="images/lion.gif"> Lev je vo vseobecnosti povazovany za krala zvierat.<BR> No v skutocnosti je to dost plache zviera.<BR> A navyse aj velmi lenive.

Lev je vo vseobecnosti povazovany za krala zvierat.
No v skutocnosti je to dost plache zviera.
A navyse aj velmi lenive.


Zmenou zarovnania mozno dosiahnut ze text bude obrazok obtekat. Ak je ALIGN=left text bude obrazok obtekat po pravej strane ak ALIGN=right tak po lavej strane.


<P> Teraz si povieme nieco o levovi.<BR> Lev zije v afrike (ako kazdy vie). <IMG SRC="images/lion.gif" ALIGN=left> Vo vseobecnosti povazovany za krala zvierat.<BR> No v skutocnosti je to dost plache zviera.<BR> A navyse aj velmi lenive.

Teraz si povieme nieco o levovi.
Lev zije v afrike (ako kazdy vie). Vo vseobecnosti povazovany za krala zvierat.
No v skutocnosti je to dost plache zviera.
A navyse aj velmi lenive.


Obtekajuci text je velmi blizko obrazka. To sa da napravit atributmi HSPACE a VSPACE, ktore definuju volne miesto okolo obrazka. Atribut HSPACE v horizontalnom a VSPACE vo vertikalnom smere. Volne miesto sa udava v pixeloch.


<P> Teraz si povieme nieco o levovi.<BR> Lev zije v afrike (ako kazdy vie). <IMG SRC="images/lion.gif" ALIGN=left HSPACE=10 VSPACE=5> Vo vseobecnosti povazovany za krala zvierat.<BR> No v skutocnosti je to dost plache zviera.<BR> A navyse aj velmi lenive.

Teraz si povieme nieco o levovi.
Lev zije v afrike (ako kazdy vie). Vo vseobecnosti povazovany za krala zvierat.
No v skutocnosti je to dost plache zviera.
A navyse aj velmi lenive.


Ak je obrazok v hypertextovej linke, mozeme vyuzit atribut USEMAP na urcenie cielovej hypertextovej linky v zavislosti od toho, kam na obrazku klikneme. Atribut obsahuje URL ku klient-orientovanej obrazkovej mape tvorenej elementom MAP. Blizsie informacie o vytvarani mapy si pozri pri vysvetleni elementu MAP.


Ak je obrazok castou hypertextovej linky (element A) a uzivatel klikne na obrazok, atribut ISMAP zabezpeci vyslanie suradnic kurzora na obrazku serveru. URL specifikujuca server je odvodena od URL definovanej atributom HREF elementu A, pricom sa doplni o znak '?' za ktorym nasleduju x-ova a y-ova suradnica oddelene ciarkou (bez medzier). Je to vyhodne vtedy ak HREF ukazuje na nejaky CGI skript ktory tieto suradnice spracuje a vysledok (napr. nejaky dokument) posle prezeracu naspat.
Nasledujuci priklad je nefunkcny (uvedeny CGI skript neexistuje).


<A HREF="/cgi-bin/navbar.map"> <IMG SRC="http://www.zoznam.sk/.img/logo.jpg" WIDTH=500 HEIGHT=79 BORDER=0 ISMAP> </A>