HTML (5) - obrázky

Je na čase oživit naše stránky obrázky...

8.7.2004 15:00 | Pavel Kácha | přečteno 35340×

Vložení obrázku do stránky není nijak složité, jak by si někdo mohl možná myslet. Nejdůležitější je znát URL obrázku, který chceme na své stránce zobrazit. Ideální je, pokud máte obrázek nahraný na svém "domovském" serveru (případně ještě někde zálohovaný), ale samozřejmě je možné vložit obrázek i z jiné stránky. Pro tuto možnost hovoří to, že ušetříte místo na svém serveru. Ovšem na druhou stranu je to trochu risk: stačí, aby si webmaster serveru, ze kterého si půjčujete obrázek, vzpomněl a přejmenoval soubor nebo ho dokonce smazal. V takovém případě se na vaší stránce zobrazí jen prázdný rámeček s popiskem obrázku, což jistě návštěvníka nepotěší. Další nevýhodou je to, že při načítání stránky se musí kontaktovat i další server, takže se doba natažení obrázku trochu prodlouží.

Pokud už jsme se rozhodli odkud budeme brát obrázky pro své stránky, můžeme začít psát kód pro vložení obrázku do stránky. Základem všeho je tag <img>, který je nepárový, a jeho nejdůležitější atribut je src="", kterým určíme umístění vkládaného obrázku. Hodnotou tohoto parametru může být buď absolutní nebo relativní URL obrázku. Relativní URL se zadává stejně jako v shellu, takže pokud máte v nadřazeném adresáři např. soubor logo.png zadejte pro jeho vložení do stránky tento kód:

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

Dalším důležitým atributem je alt="". Tímto atributem předáváme prohlížeči alternativní popisek obrázku, tj. popisujeme co je na obrázku pro případ, že bude nedostupný nebo že bude návštěvník používat textový prohlížeč nebo aby se návštěvník rozhodl jestli ho vůbec chce stahovat. :) Každý obrázek by měl mít nastavený atribut (dokonce se to vyžaduje) alt="", aby byly stránky "plnohodnotné" i v textové formě. Jazyk, kterým je alternativí text napsán se určuje podle hodnoty atributu lang="".

POZOR: Teď bych rád trochu odbočil a upozornil na jednu z mnoha chyb jednoho zatím (bohužel) majoritního prohlížeče od nejmenované malé měkké firmy. Pokud použijete atribut alt="" a vynecháte atribut title="", který má pro obrázky stejný význam jako pro všechny ostatní tagy, co jsme dosud probrali, vezme si tento prohlížeč alternativní popisek obrázku i pro atribut title="", takže po najetí kurzoru na obrázek se objeví bublinka s alternativním popiskem. Pokud se tomu chcete vyhnout, použijte tento kód, není sice nijak elegntní, ale funguje (pokud někdo znáte lepší způsob napište mi prosím do diskuze nebo na mail):

<img src="../logo.png" alt="alternativní popisek" title="">

Dále by vás měly zajímat atributy width="" a height="", pomocí kterých dopředu sdělíte prohlížeči, jak velký obrázek se bude do stránky vkládat, a tím ušetříte prohlížeči práci s přeformátováváním stránky po načtení obrázku. Nyní jsou ale tyto atributy vytlačovány CSS - W3C consorcium se tak snaží očistit HTML od zbytečných tagů a atributů a vrátit mu jeho původní účel: vyznačení struktury dokumentů. Pokud jste v HTML nováčci, nedělejte si s tím zatím příliš hlavu, až si zažijete HTML, naučíte se CSS a stránky si přepíšete. :)

Jméno obrázku pro identifikaci ve scriptovacích jazycích můžete vytvořit dvojím způsobem: pomocí atributu name="" - tento atribut zůstává už jen kvůli zpětné kompatibilitě kódu; nebo přes modernější atribut id="".

Ve standardu HTML je také definován atribut longdesc="", kterým specifikujeme adresu podrobnějších informací o obrázku. Pokud je obrázek "klikací mapou" specifikuje tento atribut i informace o klikací mapě a její obsah.

Dalším speciálním atributem je usemap="", který specifikuje rozložení aktivních a pasivních oblastí na obrázku. Každá mapa má nějaké jméno, kterým se později volá. Vice o klikacích mapách se dozvíte v příštím díle.

Ostatní atributy si krátce představíme v tradiční tabulce:

Atribut Hodnota Význam
id libovolný text Hodnotou atributu je text (znakový řetězec), který je jednoznačným identifikátorem prvku v dokumentu. Tento atribut využijete třeba při oživování stránek pomocí JavaScriptu.
class libovolný text Hodnotou atributu je třída definovaná v tabulce prvků CSS, podle které se prvek zformátuje.
lang zkratky označující jazyk, např.: en, cz, sk Hodnotou atributu určujeme jazyk, kterým je psaný alternativní popisek. Podle zvoleného jazyka se aktivují různé konvence používané v konkrétních jazycích (např.: francouzské uvozovky).
dir rtl Určuje směr textu zprava doleva.
ltr Určuje směr textu zleva do prava.
title libovolný text Určuje titulek obrázku, který se v některých prohlížečích zobrazí jako bublinková nápověda po najetí kurzoru na obrázek.
style příkazy jazyka CSS, např. color : red; Pomocí tohoto atributu můžete nadefinovat, jak se má zobrazit určitý logický styl. Můžete využít všechny možnosti, které CSS nabízí.
align bottom Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je součástí řádky a jeho spodní linka je zarovnána s řádkou. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
middle Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je součástí řádky a je vzhledem k řádce vycentrován. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
top Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je součástí řádky a jeho horní linka je zarovnána s řádkou. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
left Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je u levého okraje stránky a je obtékán textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
bottom Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je u pravého okraje stránky a je obtékán textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
border rámeček okolo obrázku v pixelech Nastavuje šířku rámečku okolo obrázku. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
hspace odsazení textu zleva a zprava od obrázku v pixelech Nastavuje velikost mezery mezi obrázkem a okolním textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
vspace odsazení textu shora a zdola od obrázku v pixelech Nastavuje velikost mezery mezi obrázkem a okolním textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.

Samozřejmě že i obrázky mají atributy využitelné ve spojení se scriptovacími jazyky.

Povolené atributy spojené s JS v logických stylech
Atribut Význam
onclick Příkazy zadané jako hodnota proběhnou při kliknutí na obrázek
ondblclick Příkazy zadané jako hodnota proběhnou při dvojkliku na obrázek
onmousedown Příkazy zadané jako hodnota proběhnou při stisku tlačítka myši na obrázku
onmouseup Příkazy zadané jako hodnota proběhnou po stisku tlačítka myši (po uvolnění tlačítka) na obrázku
onmouseover Příkazy zadané jako hodnota proběhnou při přejetí kurzoru nad obrázkem
onmousemove Příkazy zadané jako hodnota proběhnou při pohybu kurzoru nad obrázkem
onmouseout Příkazy zadané jako hodnota proběhnou poté, co kurzor opustí prostor nad obrázkem
onkeypress Příkazy zadané jako hodnota proběhnou při stisku klávesy na klávesnici
onkeydown Příkazy zadané jako hodnota proběhnou při pohybu klávesy dolů (událost nastane ještě před úplným stisknutím klávesy)
onkeyup Příkazy zadané jako hodnota proběhnou při pohybu klávesy nahoru (událost nastane až při návratu klávesy do nestisknutého stavu)

V příštím díle dokončíme obrázky, probereme si klikací mapy.

Online verze článku: http://www.linuxsoft.cz/article.php?id_article=253