Obrßzky v HTML

Tag IMG - Zadßvßnφ rozm∞r∙ - Popis obrßzku (alt) - ObtΘkßnφ a umφst∞nφ - RßmeΦek - Zmen╣eniny, galerie

Mßte-li p°ipraven² obrßzek, m∙╛ete ho umφstit do strßnky.

Tag IMG

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 (slo╛ce), p°idß se adresß°ovß cesta. Nap°φklad <img src="adresar/jiny_obrazek.gif">

Dß se pou╛φt i absolutnφ adresa, t°eba src="http://www.seznam.cz/logo.gif" .

Krom∞ src se zadßvajφ dal╣φ atributy obrßzku. Nap°. k≤d

<img border="3" src="kote.gif" alt="kot∞" align="right" width="60" height="60">

vlo╛φ do strßnky obrßzek kot∞te zarovnan² doprava s popiskem kot∞. O jednotliv²ch atributech pojednßvß dal╣φ text.

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.

Zji╣t∞nφ velikosti obrßzku

Pokud nevφte, jak je p°esn∞ obrßzek velk², dejte ho do strßnky nap°ed bez rozm∞r∙. Pak si strßnku zobrazte v prohlφ╛eΦi, klikn∞te prav²m tlaΦφtkem vlastnosti obrßzku a p°eΦt∞te si rozm∞ry. Ty potom zadejte do k≤du.

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

• Deformace je nevhodnß z estetick²ch d∙vod∙.
• Zmen╣ovßnφ se nepou╛φvß, proto╛e se obrßzek nemusφ vykreslit sprßvn∞, ale hlavn∞ se p°i tom zbyteΦn∞ p°enß╣φ cel² velk² obrßzek, z n∞ho╛ se pak zobrazφ jenom n∞kterΘ bity.
• Zv∞t╣ovßnφ se nepou╛φvß z toho d∙vodu, ╛e v²slednou grafiku to rozkreslφ do hrub²ch ΦtvereΦk∙.

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!

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.

Zßsadnφ v²znam mß alt pro alternativnφ mΘdia, nap°φklad textovΘ prohlφ╛eΦe, indexovacφ roboty, zrakov∞ posti╛enΘ, hlasovΘ v²stupy. Takov²m klient∙m poskytujφ zßstupnou informaci o obrßzku.  

V nov∞j╣φch prohlφ╛eΦφch se dß stejnΘho efektu dosßhnout pomocφ atributu title, ten takΘ zobrazuje ╛lutou bublinu. Pak jde d∞lat bublinu i u textu. 

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╣echny ostatnφ hodnoty urΦujφ umφst∞nφ obrßzku 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 mßlo pou╛itelnΘ.

RßmeΦek

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

<img src="obrazek.gif" border="3">

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.

Zru╣enφ rßmeΦku

Je-li obrßzek v odkazu, prohlφ╛eΦe jej obalujφ barevn²m (v∞t╣inou modr²m) rßmeΦkem. Chcete-li se tomu vyhnout, zadejte border=0.

Zmen╣eniny, galerie

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 src="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" ..>).

Existujφ programy, kterΘ to um∞jφ ud∞lat automaticky. Myslφm, ╛e se to jmenuje Ulead, taky to umφ FrontPage 2002 a urΦit∞ spousta jin²ch program∙.

P°edchozφ: P°φprava obrßzku
Vizte tΘ╛: zdokonalenφ odkaz∙ (zßm∞na obrßzku). Pokud nezatracujete Internet Explorer, budou vßs zajφmat podporovanΘ grafickΘ filtry.