Obrázky v HTML | Tutoriály

#1 Obrázek

Pro vložení obrázku na stránku se používá nepárový prvek <img>, nemá tedy koncový tag.

Poznámka: Technicky se o vložení nejedná, jedná se o odkaz na soubor, přičemž tag obrázku určuje prostor, kde se odkazovaný soubor ukáže – vyhrazuje pro něj místo.

Atribut src

Samostatný prvek <img> však pouze určuje místo na webu pro daný obrázek. Abychom obrázek mohli zobrazit, potřebujeme jeho adresu, která se vkládá do atributu src. Atribut src je povinný (bez něj se obrázek ani nezobrazí). Obrázkem nemusí být pouze statický obrázek, ale také GIF.

Zdroj obrázku nemusí být pokaždé pouze v složce s projektem, ale může být uložen na externím serveru. Pokud je tak uložen, vkládá se (podobně jako odkaz) s celou adresou. Oba případy vypadají tedy takto:

<img src="img/logo.png">

<img src="https://piskod.cz/img/logo.png">

Tip: Dobrým zvykem je ukládat si obrázky do samostatné složky – obrázky jsou pokaždé na stejném místě a při uploadu na web stačí nahrát celou složku pro automatickou aktualizaci všech obrázků.

Atribut alt

Dalším povinným atributem, avšak často zapomínaným je atribut alt, který definuje alternativní text. Když prohlížeč nestihne nebo nemůže najít požadovaný obrázek na jeho adrese, zobrazí se obsah atributu jako náhrada obrázku.

<img src="img/logo.png" alt="Logo společnosti">

<img src="img/ruze.jpg" alt="Růže, v pozadí zelený keř">

Šířka a výška obrázku

Již nepovinné atributy, šířka width a výška height, definují zmíněné proporce obrázku. Tyto hodnoty lze také definovat v CSS nebo pomocí prvku <style>, což je pro většinu případů výhodnější, než je specifikovat na absolutní hodnotu přímo v tagu <img>.

<img src="img/logo.png" alt="Logo" width="100" height="50">

#2 Obrázková mapa

HTML prvek <map> definuje obrázkovou mapu, tedy obrázek na jehož určité části lze klikat a pomocí nich odkazovat. Dané části jsou označeny prvkem <area>.

<img src="img/pocitac.jpg" alt="Počítač" usemap="#pocitac">

<map name="pocitac">

 <area shape="rect" coords="0,89,223,306" alt="Monitor" href="monitor.html">

 <area shape="rect" coords="504,608,690,710" alt="Klávesnice" href="klavesnice.html">

</map>

Příklad výše obsahuje obrázek počítače, na kterém se nachází monitor a klávesnice. Následně se tam nachází prvek <map>, který specifikuje mapu pro daný obrázek (všimněte si atributu usemap u obrázku a name u mapy).

V prvku <map> se nachází dvakrát prvek <area>, který specifikuje dané části. Atribut shape definuje co má prohlížeč od tvaru očekávat a kolik se má nacházet bodů v atributu coords, ve kterém se právě ty body na mapě nacházejí. Doplňující tag href už specifikuje kam se po kliknutí na část mapy dostaneme.

Atribut shape může obsahovat následující hodnoty:

rect – definuje oblast tvaru obdélníku nebo čtverce
circle – oblast tvaru kruhu
poly – definuje polygonální oblast (nekonečně bodů, jakýkoliv tvar)
default – definuje celou mapu