Obrázky

Tag Význam Párový Výskyt
img obrázek ne  
map klikací mapa ano  
area oblast v klikací mapě ne <map>

Img

Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného souboru. Tag <img> má kromě obecných atributů spoustu dalších:

Atributy tagu <img>
Atribut Význam Hodnoty Nahraďte CSS stylem
src umístění souboru s obrázkem URL  
alt alternativní popis libovolný text  
lowsrc náhradní obrázek pro malé displeje URL  
width šířka délka nebo procento width
height výška délka nebo procento height
border tloušťka rámečku délka border
vspace vertikální okraj délka margin
hspace horizontální okraj délka
align zarovnání obrázku left, right, top, texttop,
middle, absmiddle,
baseline, bottom, absbottom
float (left, right)
vertical-align (ostatní hodnoty)
usemap použití klikací mapy "#" + jméno mapy, nebo URL  
ismap přidání souřadnic kliknutí bez hodnoty  
longdesc dlouhý popisek text nebo URL  

Src

Zdoj obrázku, prostě cesta k tomu souboru (angl. source = zdroj). Cesta k obrázku se udává jako klasické URL absolutně nebo relativně. Přípustné jsou soubory typu *.gif, *.jpg, v novějších prohlížečích také *.png a v Internet Exploreru *.bmp. (Jiné typy souborů se musejí vkládat jako objekty pomocí doplňku prohlížeče). Pokud soubor obrázku nebude nalezen, zobrazí se ve stránce zástupný symbol nenalezeného obrázku (nejčastěji červený křížek) se zástupným textem.

Příklad vložení obrázku strom.gif, který se nachází ve stejném adresáři (relativní cesta):

<img src="strom.gif" alt="strom">

Příklad vložení obrázku absolutní cestou:

<img src="http://www.jakpsatweb.cz/images/jakpw.gif" alt="Jak psát web">

Pokud je src zadané špatně, objeví se místo obrázku červený křížek. (Jak řešit nefunkční obrázky.)

V nových prohlížečích (v IE až od verze 8) lze obrázek zapsat také přímo do HTML nebo CSS souboru pomocí schématu data:. Já sám to nepoužívám -- zajímá-li vás to, hledejte "data URI".

Alt

Zástupný text (alternative text). Zobrazuje se ve stránce v oblasti nenačteného obrázku.

Spousta lidí prochází web s vypnutými obrázky (třeba já kvůli slabému připojení), mnoho uživatelů webu je slabozrakých, slepci si nechávají stránky předčítat čtečkami nebo převádět do braila. Pro všechny tyto uživatele jsou obrázky neviditelné. Oni vědí, že na stránce je obrázek, ale nevědí, co na něm je. A proto (a nejen proto) se tam píše alt.

Příklad zástupného textu "strom":

<img src="strom.gif" alt="strom">

Dříve platilo, že se atribut alt zobrazoval ve žluté bublině při přejetí myší. (Tak zvaný tooltip.) Chcete-li udělat takovou žlutou bublinu, nepoužívejte na to alt (jak dodnes stojí v mnoha návodech), ale atribut title.

Lowsrc

Zástupný obrázek pro malé displeje. Nikdy jsem neviděl použití. V mnoha návodech se uvádí, že se tento obrázek načítá před načtením vlastního src. To ale platí pouze pro starý Netscape, který už nikdo nepoužívá. Osobně doporučuji lowsrc nepoužívat.

Width, height

Šířka (width) a výška (height) obrázku. Udává se v pixelech (normální číslo) nebo procentech. Pokud rozměry nejsou uvedeny, zobrazí se obrázek ve své normální velikosti. V praxi se doporučuje výšku a šířku u obrázku zadávat i v případě, že obrázek bude přirozeně veliký. To kvůli rychlejšímu a lepšímu načítání stránky.

Pokud se zadají jiné rozměry, než má obrázek ve skutečnosti, pak se ve výsledku obrázek zvětší, zmenší nebo zdeformuje. V případě, že je uveden jenom jeden rozměr (šířka nebo výška), upraví se druhý rozměr tak, aby obrázek zachovával proporce (takže může být jinak velký, ale nebude deformovaný).

Pozor na častou chybu přehazování písmenek t a h. Widht je špatně, správně je width. Heigth je špatně, správně je height.

Příklad: mám obrázek strom.gif o šířce 50 a výšce 100 pixelů. Nejlépe je zadat jej takto:

<img src="strom.gif" width="50" height="100" alt="strom">

V případě, že rozměry nezadám, obrázek se nakonec načte stejně velký. Jenomže při načítání si nevyhradí místo a způsobí, že dokument po načtení obrázku poskočí:

<img  src="strom.gif" alt="strom">

Zadají-li se jiné rozměry, obrázek bude deformován, ale rozměry v dokumentu dodrží:

<img src="strom.gif" width="70" height="70" alt="deformovaný strom">

V případě, že zadáte do width nebo height nulové hodnoty, Internet Explorer stejně vykreslí 1px velký obrázek. Chcete-li obrázek nulové velikosti, zadejte mu rozměry pomocí CSS stylů width a height.

Border

Tloušťka rámečku. Lze zadat nula, pak nebude obrázek orámečkovaný. Různé prohlížeče se liší v tom, zda zobrazují rámeček u obrázku, u kterého border nebyl zadán. Proto komu záleží na přesném vzhledu, měl by border vždy zadávat. Poslední dobou se ale doporučuje rámeček spíše zadávat css stylem border.

Příklad nejčastějšího použití: je-li obrázek v odkazu, přirozeně se kolem něj tvoří barevný rámeček:

<a href="stranka.html"><img  src="strom.gif" alt="strom"></a>

Nejprostším řešením je zadat obrázku nulový okraj border="0":

<a href="stranka.html"><img  src="strom.gif" alt="strom" border="0"></a>

V moderní praxi se tento postup už doporučuje nahradit spíše globálním stylem:

<style>
a img {border-width: 0px;}
</style>

Další údaje o odkazech v HTML.

Vspace, hspace

Vertikální a horizontální okraje, prostě prázdné místo okolo. Zadává se v pixelech (tedy bez hodnoty a znamená to pixely), nebo v procentech. Procenta se počítají z rozměru obrázku. V praxi se zastaralé atributy vspace a hspace nahrazují CSS stylem margin.

Align

Zarovnání obrázku s okolím.

Tag <img>, atribut align
  align= Význam Nahraďte CSS zápisem
Obtékání obrázku left Obrázek je umístěn k levému okraji a obtékán zprava. float: left;
right Obrázek je umístěn k pravému okraji a obtékán zleva. float: right;
Vertikální umístění obrázku na řádku top Vršek obrázku je zarovnán s nejvyšším bodem libovolného objektu řádku. vertical-align: top;
texttop Vršek obrázku je zarovnán s nejvyšším bodem textu (většinou je to totéž, co top). vertical-align: text-top
middle Střed obrázku je zarovnán s účařím písma řádku. -
absmiddle Střed obrázku je zarovnán se středem řádku. vertical-align: middle;
baseline Spodek obrázku je zarovnán na účaří. vertical-align: text-bottom;
bottom Spodek obrázku je zarovnán na spodek písma -
absbottom Spodek obrázku bude zarovnán na nejnižší místo řádku. vertical-align: bottom;

Osobně považuji sedm hodnot pro umístění na řádku za zbytečnost a nepoužívám je. Má to smysl pouze u malých obrázkových matematických vzorců. Velký obrázek se v praxi většinou nechává obtékat nebo umisťuje do samostatného odstavce.

Obtékané obrázky se vertikálně nacházejí pod řádkou, v níž jsou uvedeny (to je trochu nešikovné, ale logické). Jedinou výjimkou je, kdy obtékaným obrázkem řádka začíná - pak je vrchol obrázku v úrovni vrcholu řádky.

Atribut align se dá nahradit css stylem float (pro hodnoty obtékání right a left) a css stylem vertical-align (pro umístění na řádku).

Chcete-li obrázek umístit na střed, přes atribut align to nejde. Obalte obrázek nějakým blokovým prvkem (třeba tagem <div>) a zarovnání na střed zadejte tomuto obalovacímu prvku.

Style

Všechny atributy kromě src, alt a usemap se dají nahradit CSS deklarací pomocí obecného atributu style.

Příklad: Následující dva obrázky se zobrazí stejně:

<img src="strom.gif" alt="strom" width="88" height="31" border="2" hspace="10" align="right">

<img src="strom.gif" alt="strom" style="width: 88px; height: 31px; border: 2px solid; margin-left: 10px; margin-right: 10px; float: right">

Usemap

Přítomnost tohoto atributu dělá z obrázku klikací mapu. Hodnotou atributu je křížek # plus jméno mapy. Mapa je element vyznačený tagem <map> obsahující definici aktivních oblastí. Popis mapy je umístěn v tomtéž HTML dokumentu. Jméno mapy je určeno atributem name u tagu <map> . Příklad viz u popisu tagu <map>.

Ismap

Pokud je obrázek v odkazu, při kliknutí se za adresu připojí otazník a souřadnice kliknutí oddělené čárkou. Umějí to zpracovávat některé serverové skripty. Atribut ismap je považován za zastaralý a v praxi se nepoužívá.

Longdesc

Dlouhý popisek se používá málo, protože na to autoři stránek kašlou, a tak na to kašlou i prohlížeče. Do tagu <img> se dá dát kromě atrubutu alt, který má obsahovat popisek obrázku, také atribut longdesc, který odkazuje na jiné URL, na kterém je obrázek popsán. Podporuje to Opera a některá rozšíření jiných prohlížečů (zobrazují možnost přechodu na to jiné URL v kontextovém menu).

Nestandardní atributy

Přidá-li se od html tagu <img> atribut galleryimg s hodnotou false (tedy <img ... galleryimg="false"), prohlížeč Internet Explorer nebude po přejetí obrázku myší zobrazovat takové ty tři hnusné ikonky (uložit vytisknout a ještě něco). Na Firefox ani jiné prohlížeče to vliv nemá.

Dalším nestandardním atributem je dynsrc. Pokud se v tagu <img> místo atributu src uvede tag dynsrc, jde o video. Jde pravděpodobně o velmi nestandardní rozšíření Internet Exploreru, většinou nefunguje.

Atributy tagu <img dynsrc="...">
Atribut Význam Hodnoty
dynsrc adresa videa URL
loop počet přehrávání číslo nebo "infinite"
loopdelay prodleva mezi přehráváními čas v milisekundách
start kdy se má začít přehrávat "mouseover" -- při přejetí myši, jinak po natažení stránky
controls zobrazení ovládání atribut bez hodnoty (Netscape nepodporuje)

Prohlížeče podporují takové video formáty, na které mají v operačním systému kodeky. Trochu lepší podporu videa lze dosáhnout pomocí objektů.

Map

Klikací mapa obrázku. V dokumentu se tento element nijak nezobrazuje, pouze způsobuje, že obrázek bude ně některých místech klikat jako odkaz. Mapa obsahuje popis aktivních oblastí, které jsou reprezentovány tagy <area>. Pomocí jména -- atributu name -- je mapa spojena s obrázkem (atribut usemap u <img>). Name může být libovolný název. Jedna mapa může být teoreticky přiřazena k více obrázkům, nenapadá mě ale situace, kdy je to užitečné. 

Klikatelné oblasti jsou uvnitř mapy definovány pomocí tagů <area>.

Příklad:
<map name="ctverecky">
<area href="prvni.htm" shape="rect" coords="80, 80, 130, 130">
<area href="druha.htm" shape="rect" coords="20, 20, 50, 50">
</map>


<img src="obrazek.gif" usemap="#ctverecky" width="150" height="150">

Area

Aktivní oblast v mapě. Nepárový tag. Nezobrazuje se. Může se vyskytovat pouze v elementu <map>. Area vymezuje oblast obrázku, na kterou se dá kliknout jako na odkaz. V jednom elementu <map> může být neomezeně elemetů <area>, každá pro jednu aktivní oblast.

Atributy tagu <area>
Atribut Význam Hodnoty
href cíl odkazu URL
target cílový rám jméno rámu
shape tvar oblasti rect, circle, polygon
coords souřadnice oblasti čísla oddělená čárkami
nohref oblast není odkazem bez hodnot
alt alternativní text libovolný text

Atributy href a target jsou stejné jako u odkazů. Z obecných atributů vypichuji atribut title, který v novějších prohlížečích zobrazuje u myši nad oblastí bublinu s textem. Atribut alt takto nefunguje, ten má význam pouze pro negrafické klienty.

Atrribut shape určuje tvar oblasti, podle toho se potom mění význam hodnot atributu coords. Ten obsahuje souřadnice v pixelech, přičemž počátek souřadnic je levý horní roh mapy (tedy obrázku) a y roste směrem dolů.

Tag <area>, atributy shape a coords
shape= Význam zadává se coords=""
rect obdélník levý horní roh, pravý dolní roh lh-x, lh-y, pd-x, pd-y
circle kruh střed, poloměr střed-x, střed-y, poloměr
polygon mnohoúhelník souřadnice každého vrcholu za sebou vrchol1-x, vrchol1-y, vrchol2-x, vrchol2-y, atd.

Jsou možné i alternativní hodnoty circ, poly a rectangle se stejnou funkcí. Pokud se dvě oblasti překrývají, je ta pozdější jakoby vespod (dlouho jsem zde měl chybnou informaci, že je navrchu). Jinak řečeno v překrývaných kouscích vyhrává ta area, která je první.

Atribut nohref byl vymyšlen pro tvorbu tvarů, které nikam neklikají. To používá např. pro tvorbu klikacích mezikruží, kdy větší circle někam kliká. Uvnitř většího kruhu je menší (v kódu uvedený jako první) s atributem nohref.

HTML zápis klikacích map je poněkud složitý. Naštěstí některé HTML editory zvládají jejich zápis tak, že autorovi pouze stačí šoupat myší (FrontPage, Web Expression).

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.