LINUXSOFT.cz Přeskoč levou lištu
Uživatel: Heslo:  
   CZUKPL

> 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 30137×

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:

<a href="http://www.linuxsoft.cz/linux_wallpapers/">
<img src="http://www.linuxsoft.cz/img/wallpapers.gif" alt="Linux Software" width="468" height="60" border="0">
</a>

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.

<map name="navigace">
  <area href="http://www.linuxsoft.cz/php/" alt="Seriál o PHP" shape="rect" coords="7,7,50,50">
  <area href="http://www.linuxsoft.cz/gimp/" alt="Seriál o Gimpu" shape="circle" coords="25,25,11">
  <area href="http://www.linuxsoft.cz/wifi/" alt="Seriál o wifi" shape="poly" coords="19,12,15,22,47,50,19,12">
</map>

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

<img src="http://www.linuxsoft.cz/img/wallpapers.gif" alt="Linux Software" usemap="#navigace">

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

<object classid="http://www.neco.cz/script.py">
  Script bohužel nejde spustit.
</object>

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.

<object data="http://www.neco.cz/video.mpg" type="application/mpeg">
  Váš prohlížeč zřejmě nepodporuje mpg.
</object>

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.

<object data="http://www.neco.cz/video.mpg" type="application/mpeg">
  <object data="http://www.neco.cz/video_obr.png" type="image/png">
    Váš prohlížeč zřejmě nepodporuje png.
  </object>
</object>

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:

<object classid="http://www.neco.cz/script.py">
  <param name="pocet_zaznamu" value="10" valuetype="data">
  Script bohužel nejde spustit.
</object>

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

Verze pro tisk

pridej.cz

 

DISKUZE

Ukázky 20.7.2004 21:57 Petr Zajíc
L Re: Ukázky 22.7.2004 22:51 Pavel Kácha
Nechápu 1.3.2006 17:44 Standa Novák
  L Re: Nechápu 1.3.2006 21:33 Ondřej Čečák




Příspívat do diskuze mohou pouze registrovaní uživatelé.
> Vyhledávání software
> Vyhledávání článků

4.10.2018 21:30 /Ondřej Čečák
LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář

18.9.2018 23:30 /František Kučera
Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář

9.9.2018 14:15 /Redakce Linuxsoft.cz
20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business. Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář

12.8.2018 16:58 /František Kučera
Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář

16.7.2018 1:05 /František Kučera
Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář

18.6.2018 0:43 /František Kučera
Červnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 21. 6. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: F-Droid, aneb svobodný software do vašeho mobilu. Kromě toho budou k vidění i vývojové desky HiFive1 se svobodným/otevřeným čipem RISC-V.
Přidat komentář

23.5.2018 20:55 /Ondřej Čečák
Od pátku 25.5. proběhne na Fakultě informačních technologií ČVUT v Praze openSUSE Conference. Můžete se těšit na spostu zajímavých přednášek, workshopů a také na Release Party nového openSUSE leap 15.0. V na stejném místě proběhne v sobotu 26.5. i seminář o bezpečnosti CryptoFest.
Přidat komentář

20.5.2018 17:45 /Redakce Linuxsoft.cz
Ve čtvrtek 31. května 2018 připravuje webový magazín BusinessIT ve spolupráci s Best Online Média s.r.o. pátý ročník odborné konference Firemní informační systémy 2018. Akce proběhne v kongresovém centru Vavruška (palác Charitas), Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00 hod. dopoledne do cca 15 hod. odpoledne. Konference je zaměřena na efektivní využití firemních informačních systémů a na to, jak plně využít jejich potenciál. Podrobnější informace na webových stránkách konfrence.
Přidat komentář

   Více ...   Přidat zprávičku

> Poslední diskuze

5.10.2018 17:12 / Jakub Kuljovsky
Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?

20.9.2018 10:04 / Jan Ober
Jaký kurz a software by jste doporučili pro začínajcího kodéra?

20.9.2018 10:00 / Jan Ober
Re: Gimp

20.2.2018 18:48 / Ivan Majer
portal

20.2.2018 15:57 / Jan Havel
Jak využíváte služby cloudu v podnikání?

Více ...

ISSN 1801-3805 | Provozovatel: Pavel Kysilka, IČ: 72868490 (2003-2018) | mail at linuxsoft dot cz | Design: www.megadesign.cz | Textová verze