Obrázky a obrázková mapa - Český HTML 5 manuál

Co by to bylo za web bez obrázků? Obrázky vložíme pomocí tagu <img>.

<img>

Tag <img> (jako image = obrázek) je nepárový a obsahuje několik atributů:

• src - Cesta k souboru s obrázkem. Dobrou praktikou je mít všechny obrázky k webu v nějaké složce, aby se nemíchaly s dalším obsahem (např. images).
• alt - Krátký popis toho, co je na obrázku (alternativní text). Atribut alt bývá často vynecháván, ale to je chyba. Hraje totiž svou roli např. ve vyhledávačích obrázků (Google images) nebo v hlasových čtečkách.

Kód vložení obrázku na stránku bude tedy následující:

<img src="images/pan-x.png" alt="Pan X" />

Výsledek:

Pozor: Musíme si uvědomit, že až budou stránky na internetu, stažení obrázku bude nějakou dobu trvat. Používejte tedy úsporné formáty, jako jsou JPEG nebo PNG, kde má výsledný obrázek malou velikost díky kompresi. JPEG se zpravidla používá na velké obrázky a fotky, PNG na ikony, nákresy a obrázky, kde jsou jednobarevné plochy. Rozhodně se vyhněte formátu BMP, který je bezkompresní nebo formátu GIF, který poškozuje paletu.

K nastavení rozměrů je možné využít atributů:

• width - Šířka obrázku v pixelech.
• height - Výška obrázku v pixelech.

Výšku a šířku obrázku je možné nastavit pomocí atributů width a height. Hodnoty můžeme zadat buď číslem (např width="64") a budou označovat velikost v pixelech nebo procenty (např width="50%"). Pokud je zadán jen jeden atribut, další se dopočítá tak, aby souhlasil poměr stran. Opět si však musíme uvědomit, že obrázek by měl být na webu v té velikosti, ve které se bude zobrazovat. Měli bychom ho tedy zmenšit např. v PhotoShopu a ne ho nahrát na web veliký a zmenšit si ho v HTML. Prohlížeč potom musí načíst celý velký obrázek, zmenšit ho a až potom ho zobrazit. To bude jistě chvíli trvat.

Obrázková mapa

Obrázek můžeme použít i jako tzv. obrázkovou mapu. Tím zaktivníme některé jeho části jako odkazy. To může být užitečné, protože jinak bychom obrázek museli ručně rozřezat na více menších, ty obalit odkazy a poté složit v původní, větší obrázek.

Jako první můžeme jednoduše odeslat serveru souřadnice, na které uživatel na obrázku klikl. Použijeme k tomu atribut

• ismap - Pokud je atribut přítomen (s libovolnou hodnotou, např. ismap nebo prázdnou), jsou po kliknutí na obrázek odeslány souřadnice kliknutí na server. Hovoříme o serverové mapě, protože si souřadnice zpracujeme a vyhodnotíme na serveru.

V kódu by to vypadalo takto:

<h2>Klikněte na planetu pro další podrobnosti</h2>
<a href="mapa.php">
<img src="images/slunecni_soustava.jpg" ismap="ismap" alt="Mapa sluneční soustavy" />
</a>

Souřadnice jsou po kliknutí na obrázek odeslány na server jako URL query string. Je potom jen na serveru, jak si je zpracuje a jak pozná, která oblast byla označena.

<map>

<map> umožňuje definovat mapu na obrázku přímo na straně klienta. Na obrázku definujeme několik oblastí s různými tvary a ty budou rovnou fungovat jako odkazy. Atributy:

• name - Specifikuje jméno mapy, pomocí kterému ji poté přiřadíme obrázku.

<area>

<area> označuje jednu oblast na mapě (obrázku). Typicky se jedná o různé tvary, které zaktivní určité části obrázku, které poté fungují jako odkazy. Má několik atributů:

• alt - Alternativní text k oblasti obrázku.
• coords - Souřadnice oblasti.
• href - Odkaz na stránku, která se otevře po kliknutí na oblast.
• hreflang - Kód jazyka.
• media - Možnost specifikovat zařízení, pro které je výsledná stránka optimalizovaná.
• rel - Vztah mezi aktuálním a cílovým dokumentem, stejné, jako u tagu <a>.
• shape - Tvar oblasti, na výběr máme:
  • default - Celý obrázek.
  • rect - Obdélník - Souřadnice určíme jako levá, horní, pravá, dolní vzdálenost od levého/horního okraje obrázku. Př.: 16, 16, 50, 50
  • circle - Kruh, souřadnice určíme jako souřadnice středu a poloměr. Př.: 35, 40, 120
  • poly - Mnohoúhelník. Určíme souřadnice jednotlivých bodů př.: 200, 16, 272, 16, 272, ...
• target - Kde se má cílový dokument otevřít, jako u odkazu.
• type - mime typ cílového URL.

Mapu k obrázku přiřadíme pomocí atributu usemap:

<img src="ptak.jpg" width="400" height="241" usemap="#map" alt="Pták" />

<map name="map">
<area shape="circle"coords="8,12,224" title="První odkaz" alt="První odkaz" href="#" />
<area shape="rect" coords="180,159,398,238" title="Druhý odkaz" alt="Druhý odkaz" href="#" />
<area shape="circle" coords="180,10,200" title="Třetí odkaz" alt="Třetí odkaz" href="#" />
</map>

Výsledek si vyzkoušejte:

Pro vytvoření obrázkové mapy můžete použít i automatizovbané programy, touto funkcí disponuje např. GIMP (filtry - www - obrázková mapa).