Vloženie obrázku do webstránok

Okrem textu vo webstránke môžeme samozrejme do webstránky vkladatťaj obrázky. Na to použijeme príkaz

IMG SRC="cesta/subor" ALIGN="zarovnanie" WIDTH="velkost" HEIGHT="velkost" VSPACE="velkost" HSPACE="velkost" BORDER="sirka" ISMAP USEMAP="#mapa" ALT="stránka"

Pre vloženie normálneho obrázka si vystačíte aj s parametrami:

IMG SRC="cesta/subor" ALIGN="zarovnanie" ALT="stranka"

SRC je cesta ku grafickému súboru, ktorý musí byť v niektorom z podporovaných formátov (.gif alebo .jpg by mali fungovať všade) Tento parameter je samozrejme povinný.

ALIGN je zarovnanie okolitého textu webstránky vzhľadom na obrázok, dá sa takto nastaviť obtekanie obrázku stránky textom:
ALIGN="top" text webstránky bude zarovnaný vzhľadom na horný okraj obrázku.

Príklad: Pokusný text webstránky.  Pokusný text, na ktorom pozorujte vzťah medzi typom zarovnania, obrázkom a textom.

ALIGN="bottom" text webstránky bude zarovnaný vzhľadom na dolný okraj obrázku.

Príklad: Pokusný text webstránky.  Pokusný text, na ktorom pozorujte vzťah medzi typom zarovnania, obrázkom a textom.

ALIGN="left" text webstranky bude zarovnany vzhladom na pravý okraj obrázku - obtekanie.

Príklad: Pokusný text stránky. Toto je obtekanie textu okolo obrázku sprava (obrázok je naľavo od textu. Toto sa časti využíva pri umiestnovaní obrázkov do textu webstránok. 

ALIGN="right" text webstránky bude zarovnaný vzhľadom na ľavý okraj obrázku - obtekanie.

Príklad: Pokusný text webstranky. Teraz vidíte obtekanie zľava, obrázok je napravo od textu. Tu by pokračoval váš text a všetko ostatné. Ked skonči obrázok, text bude opäť na celej pôvodnej šírke obrazovky. 

ALIGN="middle" text webstránky bude zarovnaný vzhľadom na stred obrázku.

Priílad: Pokusný text webstránky.  Pokusný text je teraz s obrázkom vypisaný tak, aby bol obrázok na "osi" textu webstránky.

WIDTH určuje šírku obrázku (môžeme ju zväčšiť i zmenšiť buď uvedením veľkosti v bodoch, alebo v percentách pôvodneého obrázku).

HEIGHT určuje výšku obrázkz (môžeme ju zväčšiť i zmenšiť buď uvedením veľkosti v bodoch, alebo v percentách pôvodného obrázku).

VSPACE umožňuje nastaviť okolie nad/pod obrázkom, ktoré má byť prázdne.

HSPACE umožňuje nastaviť okolie vedľa obrázku, ktoré má byť prázdne.

BORDER definuje hrúbku okraja okolo obrázku (v bodoch).

ISMAP znamená, že obrázok je mapa (niektoré oblasti sme si zadefinovali ako linky). Nemá význam pri normálnom obrázku.

USEMAP určuje meno tejto mapy. ISMAP a USEMAP su nevyhnutne pri práci s obrazkovými mapami a nemajú význam pri normálnych obrázkoch.

ALT nastavuje text webstránky, ktorý sa vypise v textovom prehliadači pri pokuse zobraziť tento obrázok, alebo pri výskyte udalosti, ktorý znemožnila zobraziť ho v grafickom prehliadači. Vrelo vam odporúčam nastaviť sem buď nejaký zmysluplný text webstránky alebo aspoň prázdny reťazec, čo urobíte takto:
ALT="". Ak totiž nenapíšeme parameter ALT vôbec, na mieste, kde máte obrázok, budete vidieť len napis "[IMAGE]" a na mieste, kde máte obrázok ako linku "[LINK]".

Ako som spomenul pri obkecavaní liniek, obrázok múže byť tiež klikatelný. Teraz si ukažeme, ako to urobíme. Tí šikovnejši z vás, ktorí radi experimentujú, na to prišli už isto sami, ostatní sa pozerajte:

Vyber si, co sa ti paci:<BR>
<A HREF="ktosom.html">Nieco o mne</A><BR>
<A HREF="ktosom.html"><IMG SRC="pictures/ikona.gif" ALT=""> zaujimave
linky</A><BR>

Vloženie obrázkovej mapy do webstránky

Čo je to vlastne obrázková mapa?

Predstavte si, že máte na svojej stránke skupinovú fotografiu. Radi by ste mali odkazy na všetkých ludí na tejto fotke. Jedna z možností je vypísať ich mená niekde mimo obrázku a odtiaľ urobiť klasické linky príkazom <A HREF>. Ale môžeme si náš obrázok "akože rozdeliť" na oblasti, ktoré ohraničíme nejakým útvarom a každá oblast bude samostatnou linkou. Celé sa to volá (obrázkova) mapa. Samozrejme, môžete ju používať, na čo len chcete, napríklad aj na zobrazenie skutočnej mapy. Ako teda na to?

MAP NAME="meno_mapy"

je blok, v ktorom budeme definovať mapu. Mapa pozostáva z oblastí, ktoré definujeme:

AREA SHAPE="rect|circle|poly" COORDS="x1,y1,x2,y2,x3,y3,..,xn,yn" HREF="cesta/subor" TARGET="meno_okna"

SHAPE nám určuje tvar citlivej oblasti, môže byť RECT (obdĺžnik), alebo POLY (polygón - mnohouholník).

COORDS ohranicujú citlivú oblasť linky v obrázku. Pri "rect" musíte urciť ľavý horný a pravý dolný roh súradnicami x1,y1,x2,y2. Bod (0,0) je v ľavom hornom rohu obrázka. Ak používate "poly", oblasť ohraničíte ľubovoľným počtom bodov, podľa požadovaného tvaru klikatelnej oblasti. Ďalšie možnosti som zatiaľ v praxi nemal čas otestovať (čoskoro bude aj to!).

HREF je, ako všetci tušíte, linka, ktorá sa aktivuje pri kliknutí na túto definovanú oblasť. Jej zápis je úplne rovnaký, ako pri príkaze <A HREF>.

TARGET má ten istý význam, ako pri príkaze <A HREF> - určite meno okna, do ktorého sa nahrá obsah linky pri použití FRAMES.

Poznámka: Keďže textové browsery nepodporujú grafiku, nebudete v nich môcť ani používať klikatelné mapy...

Priklad:

<MAP NAME="menumap">
<AREA SHAPE="RECT" COORDS="100, 0, 140, 15" HREF="slovak/vix.htm" TARGET="main">
<AREA SHAPE="RECT" COORDS="10, 10, 100, 30" HREF="slovak/hi100ry.htm" TARGET="main">
<AREA SHAPE="RECT" COORDS="150, 10, 230, 30" HREF="slovak/poviedky.htm" TARGET="main">
<AREA SHAPE="RECT" COORDS="30, 40, 110, 60" HREF="slovak/murphy.htm" TARGET="main">
<AREA SHAPE="RECT" COORDS="130, 40, 200, 60" HREF="slovak/homepage.htm" TARGET="main">
<AREA SHAPE="RECT" COORDS="90, 75, 140, 90" HREF="/" TARGET="_top">
</MAP>

...

<IMG SRC="/~vix/pictures/menumap.gif" ISMAP USEMAP="#menumap" ALT="" BORDER="0">

Keď kliknete tu, uvidíte povodný obrázok.

Tu vidíte hotovú klikatelnú mapu (momentálne nevidíte, lebo som ju zmazal. Ukážka je z mojej domácej stranky...).