Obrázky

Tag	Význam	Párový	Výskyt
img	obrázek	ne
img	video	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
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
height	výška	délka nebo procento
border	tloušťka rámečku	délka
vspace	vertikální okraj	délka
hspace	horizontální okraj	délka
align	zarovnání obrázku	left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom
usemap	použití klikací mapy	"#" + jméno mapy, nebo URL
ismap	přidání souřadnic kliknutí	bez hodnoty

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í plužiny). 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.

Alt

Zástupný text (alternative text). Zobrazuje se ve stránce v oblasti nenačteného obrázku. Pokud je obrázek načten, zobrazuje se hodnota altu při přejíždění obrázku ve žluté bublině.

Lowsrc

Zástupný obrázek pro malé displeje. Nikdy jsem neviděl použití.

Width, height

Šířka (width) a výška (height) obrázku. Udává se v pixelech (normální číslo) nebo procentech. Pokud nebude rozměr uveden, zobrazí se obrázek v tom rozměru 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.

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.

Vspace, hspace

Vertikální a horizontální okraje, prostě prázdné místo okolo. Zadává se v pixelech. V praxi se nahrazují CSS stylem.

Align

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

Tag <img>, atribut align
	align=	Význam
Obtékání obrázku	left	Obrázek je umístěn k levému okraji a obtékán zprava.
Obtékání obrázku	right	Obrázek je umístěn k pravému okraji a obtékán zleva.
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.
	texttop	Vršek obrázku je zarovnán s nejvyšším bodem textu (většinou je to totéž, co 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.
	baseline	Spodek obrázku je zarovnán na účaří.
	bottom	Spodek obrázku je zarovnán na spodek písma
	absbottom	Spodek obrázku bude zarovnán na nejnižší místo řádku.

Osobně považuji milión hodnot pro umístění na řádku za zbytečnost a nepoužívám je. Má to smysl zejména u obrázkových matematických vzorců. 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é).

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

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

Tag <map> může být umístěn i v jiném souboru. Hodnotou atributu usemap je pak jméno souboru s křížkem # a jménem mapy.

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.

Img jako video

Pokud se v tagu <img> místo atributu src uvede tag dynsrc, jde o video.

Atributy tagu <img dynsrc="...">
Atribut	Význam	Hodnoty
dynsrc	adresa animace	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)

Dnešní prohlížeče podporují video formáty *.avi, *.asf, *.ram, *.ra. Další formáty videí je nutno zpřístupnit pomocí objektů a plužin.

Hodnota infinite u loop způsobuje neustálé přehrávání. Stejně tak působí hodnota -1.

Další atributy jsou stejné jako u normálního img.

Map

Klikací mapa. V dokumentu se tento element nijak nezobrazuje. 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é.

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">

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 (podobně jako alt u obrázků). 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	lhx, lhy, pdx, pdy
circle	kruh	střed, poloměr	středx, středy, poloměr
polygon	mnohoúhelník	souřadnice každého vrcholu za sebou	vrchol1x, vrchol1y, vrchol2x, vrchol2y, atd.