Obrßzky na webu v HTML

V HTML se obrßzky vklßdajφ nepßrov²m tagem IMG, kter² mß jeden povinn² a mnoho nepovinn²ch parametr∙. Tφm povinn²m je SRC, toti╛ umφst∞nφ obrßzku. Nap°φklad
<img src="nejaky_obrazek.gif">
do strßnky vlo╛φ obrßzek, kter² se jmenuje se nejaky_obrazek.gif a je v tΘm╛e adresß°i jako ona strßnka. Pokud bude v jinΘm adresß°i, p°idß se cesta. Dß se pou╛φt i absolutnφ adresa, t°eba src="www.seznam.cz/logo.gif" .

Zadßvßnφ rozm∞r∙

Zßsadn∞ se doporuΦuje zadßvat rozm∞ry obrßzk∙ jako parametry tagu img. Nap°φklad

<img src="nejaky_obrazek.gif" width="60"
height="100">

je lep╣φ ne╛

<img src="nejaky_obrazek.gif">

Po nata╛enφ oba p°φklady vypadajφ stejn∞, rozdφl je p°i natahovßnφ. Pokud se toti╛ u obrßzku uvedou rozm∞ry, prohlφ╛eΦ pro obrßzek vyhradφ mφsto, p°esto╛e obrßzek zatφm nenφ sta╛en². Pokud se rozm∞ry neuvedou, mφsto se nevyhradφ a po nata╛enφ obrßzku text jakoby "poskoΦφ", co╛ m∙╛e zp∙sobit zmatek ve Φtenß°ov∞ orientaci, ale hlavn∞ to vypadß hnusn∞. Nejv∞t╣φ problΘmy tak vznikajφ, pokud je obrßzek v tabulce.

Zmen╣ovßnφ a zv∞t╣ovßnφ obrßzk∙

Zpravidla se u obrßzk∙ zadßvajφ skuteΦnΘ rozm∞ry v pixelech (pixel je jeden obrazovkov² bod). Pokud se ale uvedou rozm∞ry jinΘ, obrßzek zm∞nφ zobrazenφ. Takto se dajφ obrßzky zmen╣ovat, zv∞t╣ovat a deformovat (d∞lß to a╛ prohlφ╛eΦ). P°esto se nic z toho v praxi p°φli╣ nepou╛φvß:

Pokud je t°eba vlo╛it obrßzek jinΘ velikosti, doporuΦuji zm∞nit rozm∞ry natvrdo v n∞jakΘm grafickΘm programu.

Zadßvßnφ procent

Lze zadat ╣φ°ku a v²╣ku obrßzku jako procenta ze ╣φ°ky nebo v²╣ky strßnky (╣φ°ka v∞t╣inou zßvisφ na ╣φ°ce okna prohlφ╛eΦe). Mφsto poΦtu pixel∙ se prost∞ zadßvajφ procenta. P°i zadßnφ obou parametr∙ se obrßzek zdeformuje, a tak je dobrΘ zadßvat jen jeden. Pozor, umφstφte-li obrßzek do bu≥ky tabulky, procenta se poΦφtajφ ze ╣φ°ky a v²╣ky tΘto bu≥ky! (Na zßv∞r musφm dodat, ╛e zadßvßnφ procent u obrßzku mßm vyzkou╣enΘ pouze v IE 4.)

Popis obrßzku (alt)

Kdy╛ se v prohlφ╛eΦi p°ejede obrßzek my╣φ, obvykle se zobrazφ sv∞tle ╛lutß bublina s textem. Stejn² text se na mφst∞ obrßzku zobrazφ, dokud nenφ obrßzek nata╛en² (nebo kdy╛ mß n∞kdo vypnutΘ zobrazovßnφ obrßzk∙). Tento text se dß zadat jako atribut tagu IMG, nap°φklad:
<img src="runa.gif" alt="Yuh∙ova runa">

N∞kdo zadßvßnφ altu ignoruje. Potom se tam nezobrazφ nic, nebo popis, kter² zadal automaticky editor. Takov² automatick² popis b²vß p∞kn² paskvil: nap°φklad ve FrontPage 98: alt="runa.gif (357 bytes)". U╛ jsem se setkal s lidmi, kte°φ si mysleli, ╛e kdy╛ se ten text zm∞nφ, tak ╛e to potom nebude fungovat. Funguje to, klidn∞ to m∞≥te.

ObtΘkßnφ a umφst∞nφ

Atribut align tagu IMG umo╛≥uje nastavit bu∩to obtΘkßnφ obrßzku textem, nebo jeho umφst∞nφ na °ßdku. Je to pon∞kud nekoncepΦnφ, ale jednoduchΘ: hodnoty left a right nastavujφ obtΘkßnφ, v╣echno ostatnφ je umφst∞nφ na °ßdku.

P°φklad:

<img src="runa.gif" align="left"> vlo╛φ do dokumentu obrßzek, jeho╛ hornφ okraj zarovnß s dolnφm okrajem aktußlnφho °ßdku, lev² okraj bude na levΘm okraji strßnky a text bude obtΘkat.

Hodnoty pro umφst∞nφ na °ßdku jsou align= top, textop, middle, absmiddle, baseline, bottom, absbottom, center. Jejich v²znam si vyzkou╣ejte, jß tomu sßm moc nerozumφm, proto╛e to pova╛uji za nepou╛itelnΘ.

RßmeΦek

Atribut border vykreslφ kolem obrßzku rßmeΦek. Zadßvß se ╣φ°ka rßmeΦku v pixelech.

RßmeΦek b²vß Φern² (barva pφsma), ale je-li obrßzek v odkazu, tak modr² (barva odkazu).

Pokud border nezadßte, n∞kterΘ prohlφ╛eΦe rßmeΦek vykreslφ, jinΘ ne.

Je-li obrßzek v odkazu, n∞kterΘ prohlφ╛eΦe jej obalujφ barevn²m rßmeΦkem. Chcete-li se tomu vyhnout, zadejte border=0.

Zmen╣eniny

Kdo vystavuje vφce obrßzk∙ (nap°φklad kolekci fotografiφ), m∞l by pou╛φt klikacφ zmen╣eniny, aby se to nestahovalo roky. Od ka╛dΘho obrßzku je pot°eba vytvo°it si men╣φ kopii (velikostn∞ i datov∞), kterß se umφstφ t°eba do stejnΘ slo╛ky a vlo╛φ do strßnky. Velk² originßl obrßzku se do strßnky nevklßdß, ale nechß se na n∞j mφ°it odkaz:

<a href="obrazek1.jpg"><img "obrazek1_zmensenina.jpg"
width="80" height="50" alt="popis obrßzku"></a>

Je dobr²m zvykem d∞lat v╣echny zmen╣eniny na strßnce stejn∞ vysokΘ nebo ╣irokΘ a umφstit je do tabulky, aby za°ezßvaly. Dost Φasto se obrßzky nechßvajφ zobrazovat v novΘm okn∞ (<a target="_blank" ..>).