img - Český HTML 5 manuál

HTML a CSS Manuál Multimédia img - Český HTML 5 manuál

Tag <img> (jako image = obrázek) je nepárový a označuje obrázek.

Atributy

Obrázek obsahuje hned několik atributů, které jsou povinné:

  • 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. Zobrazuje se také místo obrázku v případě, kdy se obrázek nenačte (např. z důvodu pomalého připojení k internetu).

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

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

Hodnoty atributů width a height 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.

Ukázka použití

Kód vložení obrázku na stránku může být tedy následující:

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

Výsledek:

HTML tutoriál – obrázky

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 jeden 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.


 

  Aktivity (1)

Manuál pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Miniatura
Všechny články v sekci
Multimédia - Český HTML 5 manuál

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!