New Page 1

Obrázky

Obrázky oživujú vzhľad WWW stránky. Vloženie obrázku do dokumentu:
< IMG SRC="obrázok.gif" >.
Nepovinné atribúty:
FBI Seal - Alternativní text

< IMG SRC="obrázok.gif" ALT="text - popis obrázku, pokiaľ se obrázok nezobrazí, objaví sa na jeho mieste tento text" >.

- napíše alternatívny text. Môžete pridat i atribut TITLE=" ... "

< IMG SRC="obrázok.gif" align=left >

- zarovnanie obrázku k ľavému okraju okna prehliadača, text obrázok obtieka

< IMG SRC="obrázok.gif" align=right >

- zarovnanie obrázku k pravému okraju okna prehliadača, text obrázok obtieka

< IMG SRC="obrázok.gif" align=middle > Zarovnání na střed textu

- stred obrázku je zarovnaný s textem, text obrázok neobtieka

< IMG SRC="obrázok.gif" align=top > Zarovnání na horní okraj textu

- horný okraj obrázku je zarovnaný s textom, text obrázok neobtieka

< IMG SRC="obrázok.gif" align=bottom >
Zarovnnání na spodní okraj textu

spodný okraj obrázku je zarovnaný s textom, text obrázok neobtieka

< IMG SRC="obrázok.gif" WIDTH=60 HEIGHT=100>

- nastavuje šírku a výšku obrázku v bodoch

Rozměry v procentech skutečné velikosti (30% animovaný GIF)

< IMG SRC="obrázok.gif" WIDTH=30% HEIGHT=50%>

- nastavuje šírku obrázku v percentách veľkosti okna

< IMG SRC="obrázok.gif" BORDER=5>

- nastavuje v bodoch šírku rámika vôkol obrázku

< IMG SRC="obrázok.gif" HSPACE=10 VSPACE=20>

- nastavuje horizontálný (vo vodorovnom smere) a vertikálny (vo zvislom smere) mezeru medzi obrázkom a okolitým textom

Grafické formáty

Obrázky môžu byť použité z viacerích dôvodov. Ako schéma či ilustrácia doplňujúca okolitý text, ako navigačné prvky, ... Ich použitie má však dva dôležité aspekty. Na jednej strane výrazne zvyšujú kvalitu a vypovedaciu schopnosť stránky. Na dryuhej strane však výrazne zvyšujú objem dát, ktoré je potrebné prepraviť po sieti. To musíme brať do úvahy hlavne s ohľadom na užívateľov, ktorí nemajú prístup k rychlým sieťam alebo dokonca používajú k prístupu na Internet modem!
Na WWW se používajú tieto grafické formáty:
GIF - vhodný pro obrázky s charakterom kresby (ostré prechody farieb)
JPEG, JPG - vhodný hlavne pre zobrazenie fotiek.
PNG (Portable Network Graphic)- používa bezstratovú kompresiu, majú malú veľkosť, ale niejsú podporovené staršími verziami prehliadačov. Vyzerajú lepšie ako JPG obrázky.
Vo všeobecnosti sa doporučuje používať obrázky typu GIF, ktoré podporujú všetky prehliadače pracujúceí v grafickom režime. Okrem toho poskytuje formát GIF dva užitočné efekty:
1. priehľadnosť pozadia - jednu z farieb môžeme vybrať ako TRANSPARENTNÚ, tú nebude v obrázku vidiet a na jej mieste bude presvitať pozadie stránky.
2. prekladané riadky - pri tomto efekte sa nejskôr uloží obsah každého ôsmeho riadka, potom každého štvrtého, potom každého druhého a nakoniec se doplní zbytok. Obrázok se tak postupne "zaostřuje".

Citlivé obrázkové mapy

Grafické menu (citlivú - senzitívnu obrázkovú mapu) tvorí obrázok, ktorý je doplnený definíciou aktívnych oblastí v ňom a stránok s nimi spojenými. K tagu < IMG > pre vloženie obrázku sa pridá atribút USEMAP, ktorý určuje meno a definíciu oblastí mapy, ktorá má byť pre daný obrázok použitá.
< IMG SRC="orázok.jpg" ... USEMAP="#meno_mapy">

Definice mapy:

< MAP NAME="meno_mapy" >
< AREA  
  ACCESSKEY="prístupová_klávesa"
      - klávesová zkratka pre prístup do poľa zvyčajne v kombinácii s ALT
  ALT="popisok"
      - text, ktorý sa vypíše, pokiaľ prohliadač nezobrazí mapu
  COORDS="súradnice"
      - udáva súradnice pre tvary v senzitívnej obrázkovej mape
  HREF="súbor.html"
      - meno súboru, ktorý sa otvorí po kliknutí na oblasť, 
        nesmie byť použitý súčane s NOHREF!
  NOHREF
      - pre vyradenie oblasti
  SHAPE="DEFAULT|RECTANGLE|CIRCLE|POLYGON" 
      - tvar oblasti v senzitívnej obrázkovej mape
  TABINDEX="celé_číslo"
      - poradie odkazu pri požití klávesy TAB, 
        záporné číslo deaktivuje odkaz
  TARGET="méno_rámu" 
      - určuje, v ktorom rámu se odkazovaný súbor otvorí
>
< /MAP >

V tele mapy smú byť obsiahnuté iba tagy < AREA >, ktoré určujú tvar a umiestnenie jednotlivých aktívnych oblastí.
SHAPE - určuje tvar aktívnej oblasti. Prípustné sú hodnoty:
rect (obdlžník), súradnica ľavá x, horná y, pravá x, dolná y,
circle (kruh), súradnica stred x, stred y, polomer,
poly (mnohouhoľník), súradnice vrcholov x1,y1, x2,y2, ... .

Príklad:

< IMG SRC="mapa.gif" alt="Senzitívna obrázková mapa" 
USEMAP="#MAPA" BORDER=0 ALIGN=top>
< MAP NAME="MAPA">
< AREA SHAPE=rect coords="16,100,106,187" 
HREF="animacia1.htm" ALT="Informačný prúžok.">
< AREA SHAPE=circle coords="58,43,37" 
HREF="animacia2.htm"  ALT="Ako to ide?">
< AREA SHAPE=poly coords="159,199,184,163,175,149,195,118,
164,90,192,54,168,38,189,3,158,1,121,45,143,67,124,102,154,125,125,166" 
HREF="obrazok.htm"  ALT="Obrázok.">
< /MAP>

Grafické oddelovače

Pokiaľ nechcete oddelovať časti stránky len pomocou tagu < HR >, môžete použiť grafické oddelovacie čiary.

Túto techniku používajte na:

	vytvorenie vizuálnej hranice v tele stránky. Začlenenie atraktívnych vizuálnych oddelovačov výrazne rozčlení obsah tak, že umožní vzbudiť pozornosť návštevníkov v danej cvíli na jedinú sekciu.
	Presné vymedzenie jednotlivých sekcí vo vnútri stránky. Použitie jednofarebných grafických čiar a tvarov obohatí stránku a dodá jej osobitý, individuálny vzhľad.
	Myslite v malom, žite vo veľkom. Malé obrázky oproti veľkým potrebujú oveľa menej času na to aby sa preniesli a zobrazili. K vytváraniu veľkých grafických útvarov využívajte malých GIF súborov s využitím obrazových atribútov HEIGHT a WIDTH.

Ako vyrobiť grafickú oddelovaciu čiaru:

1. Navrhnite v grafickém editore plno farebné obrázky asi 5x5 bodov.

2. Vložte do kódu značky < BR >, aby obrázok začínal trochu nižšie.

3. Natiahnite malý obrázok pomocou atribútu WIDTH a HEIGHT.

Príklad:

< BR>< BR>
< IMG src="oddel3.gif" width=100% height=6>
< BR>< BR>
Malé obrázky potrebujú  oveľa menej času pre prenesenie a zobrazenie
než tie veľké. K vytváraniu veľkých grafických útvarov využívajte 
malé GIF  súbory s využitím obrazových atribútov HEIGHT a WIDTH.
< BR>< BR>
< IMG src="oddel3.gif" width=100% height=6>
< BR>< BR>

Takto to vyzerá

Navrhovanie pasparty

Pasparta (orámovanie) využívajúce optimalizovaný GIF obrázok možno jednoducho vytvoriť pomocou jednoduchého HTML.

Ako vyrobiť paspartu:

1. Navrhnite v grafickém editore 4 časti pasparty.

2. Samostatné GIFy zostavte vedľa seba pomocou tabuľky s atribútmi BORDER=0 CELLPADDING=0 CELLSPACING=0 a s atribútmi ALIGN=left|center|right VALIGN=top|middle|bottom podľa polohy okraja.

3. Do tabuľky vložte obrázok. Nezbudnite spočítať rozmer obrázku podľa veľkosti pasparty (resp. naopak).

Príklad:

< TABLE width=250 height=320 
BORDER=0 CELLPADDING=0 CELLSPACING=0>
 < TR>
   < TD colspan=3 width=250 height=30 valign=bottom>
     < IMG src="pasph.gif" width=250 height=30>< /TD>< /TR>
 < TR>
   < TD width=20 height=250 align=left>
     < IMG src="paspl.gif" width=20 height=250>< /TD>
   < TD width=210 height=250 align=center valign=middle>
     < IMG src="marsyas.gif" width=210 height=250>< /TD>
   < TD width=20 height=250 align=right>
     < IMG src="paspp.gif" width=20 height=250>< /TD>< /TR>
 < TR>
   < TD colspan=3 width=250 height=40 valign=top> 
     < IMG src="paspd.gif" width=250 height=40>< /TD>< /TR>
< /TABLE>

Takto to vyzerá

LOWSRC efekt

Jednou z najčastejších sťažností na web je to, že kým sa obrázky načítajú trvá to "večnosť" . V Nescape Navigatore tento problém rieši atribút LOWSRC vo vnútri tagu < IMG> pri splnění týchto predpokladov:

1.	LOWSRC obrázok musí vytvárať veľmi malý súbor (2-4KB, doporučujú sa 1-bitové obrázky).
2.	Obrázok musí byť uložený buď ako GIF alebo JPEG súbor.
3.	Oba obrázky musia mať rovnakú veľkosť v pixeloch.

Touto technikou:

	Zaistíte bezprostredný pocit spokojnosti. Môžeme nechat objavovať sa obrázok s nízkym rozlišením, zatiaľčo výsledný obrázok se naťahuje na pozadí.
	Vytvoríte moment prekvapenia. Môžete využiť dva úplne odlišné obrázky, čo dodá stránke dramatický moment.
	Dosiahnete, že sa obrázky budú zjavovať priebežne. Návštevníci sa nebudú nudiť pri čakaní na väčší obrázok.

Vytvorení LOWSRC efektu:

1. V grafickom editore vytvorte plno farebný obrázok.

2. V grafickom editore vytvorte aj obrázok s malým rozlíšením.

3.. Zapíšte kód
< IMG src="plno_farebný_obrázok.gif" lowsrc="obrázok_s_nízkym_rozlíšením.gif" width=šírka height=výška > ,
čoho výsledkom je zobrazenie obrázkov (pozor toto funguje len v Netscape Navigatore - stisknite tlačítko RELOAD!):

Príklad:

< TABLE align=center>< TR>< TD>
< IMG src="marsyas.gif" lowsrc="marsyasl.gif"  
width=514 height=560 align=left>
< BR>< /TD>< /TR>
< /TABLE>

Takto to vyzerá

Animácia časti veľkého obrázku

Animované GIFy môžu byť veľkou prednosťou webovej stránky. Zároveň sú však náročné na veľkosť súboru, obzvlášť ak sú vytvárané z veľkých obrázkov. Obrázok preto rozdelíme na niekoľko častí a animujeme len jednu, menšiu čásť obrázku.

Touto technikou dosiahneme to, že:

	Súbory budú malé. Animácia iba časti veľkého obrázku pomáha redukovaťdobu načítania, a napriek tomu vizuálna stránka zostátáva výrazná.
	Väčšie obrázky ožijú. Môžete vziať napríklad portrét a nechať v ňom pohybovať sa oči, alebo nakresliť psa, ako vrtí chvostom.
	Upútajte oko diváka. Náznak pohybu v inak nehybnom obrázku určite uputa pozornosť diváka.

Vytvorenie animácie veľkého obrázku:

1. V grafickom editore vytvorte obrázok a rozdeľte ho na animované a statické časti.

2. Časti obrázku zostavte vedľa seba
pomocou tabuľky s atribútmi BORDER=0 CELLPADDING=0 CELLSPACING=0 a s atribútmi ALIGN=left|center|right VALIGN=top|middle|bottom podľa polohy v tabuľke.

Vídeňská Kärntner Strasse

Príklad:

< TABLE align=center width=400 height=600 border=0 
cellpadding=0 cellspacing=0>< TR>< TD rowspan=9 align=left>
< IMG src="animacia/leva.gif" width=109 height=600>< /TD>
< td valign=bottom align=center>
< IMG src="animacia/horni.gif" width=114 height=102>< /td>
< td rowspan=9 align=right>
< IMG src="animacia/pravap.gif" width=177 height=600>< /td>
< /TR>< TR>< td valign=middle align=center>¨
< IMG src="animacia/d7.gif" width=114 height=38>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG src="animacia/d6.gif" width=114 height=38>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG  src="animacia/d5.gif" width=114 height=35>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG  src="animacia/d4.gif" width=114 height=169>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG src="animacia/d3.gif" width=114 height=36>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG src="animacia/d2.gif" width=114 height=21>< /td>< /TR>
< TR>< td valign=middle align=center>
< IMG src="animacia/d1.gif" width=114 height=13>< /td>< /TR>
< TR>< td valign=top align=center>
< IMG src="animacia/dolni.gif" width=114 height=148>< /td>
< /TR>< /TABLE>

Takto to vyzerá

Urýchlenie naťahovania obrázkov

Pri navrhování GIF obrázkov môžete ušetriť pár bajtov výsledného obrázka tým, že uložíte súbor ako transparentný GIF. Transparentnú (priehľadnú) špecifikujete farbu pozadia obrázku. Obrázok umiestnite do podfarbenej bunky tabuľky. Farbu buňky špecifikujte ako pozadie originálneho obrázku alebo podľa vašeho priania.

Príklad:

< TABLE align=center width=300 
  height=200 bgcolor=#FFEEE6>
< TR>< TD align=center valign=middle>
< IMG src="snaptr.gif" height=200 width=300>< /TD>
< /TR>< /TABLE>

Takto to vyzerá

Vrstvenie písma a obrázkov

V HTML je skutočné vrstvenie možné iba prostredníctvom kaskádových štýľov CSS.

Táto technika se využíva k:

Vytvorení vrstiev bez CSS. Vrstvenie písma cez grafiku (alebo písma cez GIF) bez nutnosti kaskádových štýľov.

Vrstvenie písma na písmo:

1. Vytvorte GIF (transparentný) s textom na pozadí.
Použite ho ako pozadie bunky tabuľky.

2. Napíšte text na popredí
do bunky tabuľky. Nastavte atribúty v bunke na ALIGN=left VALIGN=right a použite predformátovaný text < PRE>< /PRE>.

WOW!
Vrstvenie bez CSS! To umožní len obrázok na pozadí tabulky.

Príklad:

< TABLE width=300 height=150 border=0 cellpadding=0 cellspacing=0 >
< TR>
  < TD width=300 height=150 background="typogr.gif" align=left valign=top>
    < PRE>
      < FONT face=arial color=Navy>< H1>     WOW!< /H1>< /FONT>
      < FONT face=arial size=-2 color=Navy>
        < B>                         Vrstvenie bez CSS!< /B>
        < /FONT>
      < FONT face=arial size=-3 color="#99CCFF"> 
          To umožní len  obrázok 
                                      na pozadí tabuľky.
        < /FONT>
      < /PRE>
    < /TD>
  < /TR>
< /TABLE>

Takto to vyzerá