ARCHIV

HTML (6) - obrázky 2

Dnes se naučíme vytvářet klikací mapy a řekneme si o tagu <object> a <param>

15.7.2004 15:00 | Pavel Kácha | Články autora | přečteno 33189×

Klikací mapy

Z předchozího dílu víme, jak do stránky vložit obrázek, dnes postoupíme zase o kousek dál: vyznačíme si na obrázku oblasti, které budou fungovat jako odkazy. Jak udělat z celého obrázku odkaz, vás jistě napadne. Není to nic složitého stačí tag, kterým obrázek vkládáme "obalit" odkazem. Například takto:

Dobře, udělat odkaz z celého obrázku není nic těžkého, ale někdy se může stát, že je potřeba vyznačit jen některé části obrázku jako odkaz (příkladem může být to, když chcete na stránky dát společnou fotku svých přátel a po kliknutí na určitý obličej se zobrazí stránka s podrobnými informacemi o jednom kamarádovi). Přesně k takovému účelu existují klikací mapy.

Tvorbu každé klikací mapy bysme měli začít tím, že si rozmyslíme, jak rozmístíme po obrázku aktivní oblasti, které budou sloužit jako odkazy. Pokud už máte jasno, můžete začít tvořit. Každá mapa musí mít nějaké jméno, kterým ji pak budeme vyvolávat, to určíme v párovém tagu <map></map> pomocí atributu name="". Jeho hodnotou je téměř libovolný řetězec (vyhýbejte se diakritice a zvláštním znakům), který by měl být v rámci dokumentu jedinečný.

Mapa má své jméno a je čas jí nastavit nějaké aktivní oblasti. To uděláme pomocí tagu <area>. Většinu atributů má tento tag stejných jako běžný odkaz - <a></a>, ale některé má navíc, takže na ty se podíváme podrobně.

U každé definované oblasti byste měli nastavit atribut href="". Někdy může nastat případ, že chcete udělat odkaz z celého obrázku kromě nějaké jeho části, potom použijte místo href="" atribut nohref, který nemá žádnou hodnotu - takto označená oblast se pak chová jako obyčejný obrázek.

Popisek odkazu můžete přidat pomocí atributu alt="".

Pokud chceme vyznačit na obrázku nějakou oblast, musíme prohlížeči sdělit jaký bude mít tvar, tedy jaké má očekávat vstupní souřadnice. K tomu použijeme atribut shape="". Na výběr máme tyto tři hodnoty rect (oblast bude mít tvar obdélníku), circle (oblast bude kruhová) nebo poly (oblastí bude polygon neboli mnohoúhelník). Pokud atribut shape="" nepoužijete, předpokládá se, že budete zadávat obdélník.

Ještě určíme souřadnice vyznačované oblasti a máme naši první oblast v klikací mapě hotovou. Pro určení souřednic je připraven atribut coords="". Jaká data vložit jako hodnotu atributu coords="" je trochu složitější, záleží totiž na tom, jaký tvar chceme popisovat. Obecně ale platí, že veškeré souřadnice se dají popisovat buď pomocí pixelů nebo procent, za počátek se považuje levý horní roh obrázku a jednotlivé hodnoty se oddělují pomocí čárek - ",". Pokud vymezujete obdélník zadejte vodorovnou a svislou souřadnici levého horního a pravého dolního rohu, např.: 7,7,50,50. U kruhové oblasti vystačíte se zadáním souřednic středu a poloměru, např.: 25,25,11. A pro mnohoúhelník je situace nejsložitější, to musíte vypsat souřadnice každého bodu zvlášť, např.: 19,12,15,22,47,50,19,12

Teď už jen nadefinujeme další oblasti mapy, tady můžete vidět příklad jedné takové mapy.

Poslední, co musíme pro zprovoznění klikací mapy udělat je její propojení s obrázkem. To jde velmi jednoduše, stačí do tagu <img>, kterým vyvoláváme obrázek, přidat atribut usemap="" a jako jeho hodnotu uvést #jmeno_mapy. V našem případě by takové vyvolání vypadalo asi následovně:

Může se vám také stát, že se budou oblasti definované na obrázku překrývat, v tom případě má přednost oblast, které byla uvedena dříve.

<object></object>

Tag <object></object> se používá ke vložení nějakého objektu do stránky. Výběr je velice široký, seznam objektů resp. jejich MIME-typů je k dispozici například na adrese ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/media-types. Použití <object></object> má jednu velikou výhodu: pokud se vám nepodaří načíst data, která tvoří objekt, zobrazí se obsah elementu <object></object>.

K určení programu, který zobrazí applet, použijeme atribut classid="", jeho hodnotou je cesta k programu. Pomocí atributu codetype="" můžeme určit typ dat, která program specifikovaný v classid="" očekává.

Atributem data="" určíme adresu souboru, který chceme v objektu zobrazit, typ dat předáme v atributu type="", jeho hodnotou je MIME-typ dat, která chceme v objektu zobrazit.

Pokud chcete uvést dokumenty, které se nějak váží k objektu, můžete to udělat atributem archive="". Jeho hodnotou je seznam URL adres oddělených mezerou. Pokud jako hodnotu zapíšete i URL uvedené v classid="" a data="", mělo by se tak zrychlit načítání objektu.

Do atributů classid="", data="" a archive="" můžete uvádět samozřejmě i relativní URL adresy. Pokud vám ale nevyhovuje jako začátek pro relativní adresu adresa aktuálního dokumentu, můžete ji přenastavit atributem codebase="".

Také je možné objekt jen deklarovat, to uděláme atributem declare, který nemá žádnou hodnotu. Objekt se vyvolá až později použitím elementu <object></object> s odkazem na deklarovaný objekt.

Zajímavým atributem je také standby="", jeho hodnotou je text, který prohlížeč zobrazí dokud se mu nepodaří načíst celý objekt a data s ním související.

Další atributy mají prakticky stejný význam jako u obrázků. Pro <object></object> jsou povoleny tyto:

• id=""
• class=""
• lang=""
• dir=""
• title=""
• style=""
• tabindex="" (viz díl o odkazech)
• usemap=""
• name=""
• align=""
• width=""
• height=""
• border=""
• hspace=""
• vspace=""
• onclick=""
• ondblclick=""
• onmousedown=""
• onmouseup=""
• onmouseover=""
• onmousemove=""
• onmouseout=""
• onkeypress=""
• onkeydown=""
• onkeyup=""

Toho, že element <object></object> zobrazí svůj obsah pokud nemůže zobrazit cíl definovaný pomocí classid="" a data="", se dá využít tak, že do sebe vnoříte několik tagů <object></object>. První může obsahovat třeba video sekvenci, další nejzajímavější záběr z filmu (ten se zobrazí pokud prohlížeč nebude podporovat video) a pokud se nepodaří načíst ani obrázek můžete vypsat zprávu, že tu je možné s jiným prohlížečem vidět obrázek.

Tag <param>

Může nastat chvíle, kdy potřebujete vyvolat nějaký script s parametry, které ovlivňují jeho chování. I na to standard HTML pamatuje a pro předávání parametrů zavádí nepárový element <param>.

Jméno právě předávaného paramatru specifikuje atribut name="".

value="" obsahuje hodnoty předávané objektu.

Atribut valuetyp="" určuje typ předávané hodnoty. Jeho hodnotou může být data (což znamená, že obsah atributu value se předá přímo objektu), ref (value="" obsahuje url ukazující na data, která chceme objektu předat, jejich typ určuje atribut type="") nebo hodnota object (value="" obsahuje jen část URL a odkazuje na dřive deklarovaný objekt).

A malá ukázka nakonec:

Dnes jsme toho, myslím, probrali celkem dost, příště se podíváme, jak se vytváří seznamy.

Verze pro tisk

DISKUZE Ukázky 20.7.2004 21:57 Petr Zajíc Re: Ukázky 22.7.2004 22:51 Pavel Kácha Nechápu 1.3.2006 17:44 Standa Novák   Re: Nechápu 1.3.2006 21:33 Ondřej Čečák Zobrazit označené Zobrazit vše Příspívat do diskuze mohou pouze registrovaní uživatelé.