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