HOME    SKRIPTY
7. díl seriálu o HTML - Obrázky
Le Hai Anh | 31. května 2007

Web bez grafických motivů není příliš atraktivní, bílé stránky velmi často odradí návštěvníky, proto v tomto díle si něco řekneme o vkládání a manipulaci s obrázky pro náš web. Hlavním tagem pro tento díl bude: <img src="...">

Předtím než si ukážeme jak zacházet s obrázky, tak si sežeňte jakýkoliv obrázek a vytvořte si *.html soubor, třeba obrazek.html nebo klidně index.html.

7.1 Zobrazení obrázku


Řekněme, že už máme obrázek, který pojmenujeme obrazek.jpg i připravený soubor. Oba soubory dejte do stejného adresáře. Do html souboru vložte tento tag:

<img src="obrazek.jpg">

Odměnou pro nás bude toto:


Někdy je dobré mít obrázky v jednom adresáři, aby to bylo přehledné. Řekněme, že bychom měli takto umístěný obrázek:


Tag <img src="obrazek.jpg"> je pro tento případ nepoužitelný a ohlásí, že nemůže najít obrázek, proto musíme upravit náš takto:

<img src="adresar/obrazek.jpg">.

7.2 Parametry v obrázcích

Zatím jsme si ukázali jak zobrazit obrázek. Nyní si nadefinujeme několik parametru, které nám vylepší obrázek.

7.2.1 Popisek u obrázku

Určitě jste si všimli, že když najedete na obrázek a objeví se jeho popisek, jak na to? Lehce. Přidáme parametr alt="...", mezi uvozovkami napíšeme text, který chceme zobrazit po najetí myši.

<img src="obrazek.jpg" alt="Zvonek">

Výsledek:


7.2.2 Rozměry obrázku

V HTML můžeme bez problému měnit velikost obrázku, avšak musíme počítat při menším/větším rozlišení na ztrátu kvality obrázku.

Přidáme si další parametr do našeho tagu:

<img src="obrazek.jpg" width="..."  height="...">

width="..." - nám určuje šířku obrázku
height="..." - nám určuje výšku obrázku

Příklad: <img src="obrazek.jpg" width="180"  height="180">

Daný obrázek bude mít rozměry 180 na výšku a 180 na šířku. Míry jsou v pixelech. Rozměry můžeme libovolně měnit, takže si můžeme nastavit obrázek dle potřeb.



Zvětšený obrázek - Originál- Zmenšený obrázek

7.2.3 Okolní prostředí obrázku


Rámování

Někdy chceme mít orámovaný obrázek, takže přidáme další parametr:

<img src="obrazek.jpg" border="...">

border="..." - určuje nám tloušťku rámu od 1...6.

Příklad:

 

HTML


<img src="obrazek.jpg" border="2">

Mezery okolo obrázku

Podobně na tom bude i mezery okolo obrázku.

<img src="obrazek.jpg" hspace="..." vspace="..." >

hspace="..." - udává nám mezery v pixelech v horizontální rovině
vspace="..." - udává nám mezery v pixelech v vertikální rovině

Zarovnání obrázku

Příklad:

<img src="obrazek.gif" align="left" border="2">

HTML


Další parametry:

TOP - obrázek se zarovná s horní řádkou textu

MIDDLE - obrázek je vzhledem k řádce vertikálně vycentrován

BOTTOM - obrázek se zarovná s dolní řádkou textu

LEFT - obrázek je umístěn u levého okraje stránky a je obtékán textem

RIGHT - obrázek je umístěn u pravého okraje stránky a je obtékán textem

7.3 Odkaz v obrázku

Ve 4. díle jsme si již řekli jak se odkazuje za pomoci obrázku, teďka si to zopakujeme.

<a href="http://www.cheater.cz"> <img src="obrazek.jpg"> </a>

Po kliknuti na obrázek nás přesměruje ke stránkám Scorpion cheateru.

 

HTML


Po najetí myši pak můžeme na liště vidět kam po kliknutí obrázek přesměruje.