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

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ů

14.11.2017 16:56 /František Kučera

Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tradičně první čtvrtek před třetím pátkem v měsíci: 16. listopadu od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).


Přidat komentář

12.11.2017 11:06 /Redakce Linuxsoft.cz
PR: 4. ročník odborné IT konference na téma Datová centra pro business proběhne již ve čtvrtek 23. listopadu 2017 v konferenčním centru Vavruška, v paláci Charitas, Karlovo náměstí 5, Praha 2 (u metra Karlovo náměstí) od 9:00. Konference o návrhu, budování, správě a efektivním využívání datových center nabídne odpovědi na aktuální a často řešené otázky, např Jaké jsou aktuální trendy v oblasti datových center a jak je využít pro vlastní prospěch? Jak zajistit pro firmu či jinou organizaci odpovídající služby datových center? Podle jakých kritérií vybrat dodavatele služeb? Jak volit součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně spravovat datové centrum? Jak eliminovat možná rizika? apod.
Přidat komentář

13.9.2017 8:00 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt – tentokrát netradičně v pondělí: 18. září od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

3.9.2017 20:45 /Redakce Linuxsoft.cz
PR: Dne 21. září 2017 proběhne v Praze konference "Mobilní řešení pro business". Hlavní tématy konference budou: nejnovější trendy v oblasti mobilních řešení pro firmy, efektivní využití mobilních zařízení, bezpečnostní rizika a řešení pro jejich omezení, správa mobilních zařízení ve firmách a další.
Přidat komentář

15.5.2017 23:50 /František Kučera
Máš rád svobodný software a hardware nebo se o nich chceš něco dozvědět? Zajímá tě DIY, CNC, SDR nebo morseovka? Přijď na sraz spolku OpenAlt, který se bude konat ve čtvrtek 18. května od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5).
Přidat komentář

12.5.2017 16:42 /Honza Javorek
PyCon CZ, česká konference o programovacím jazyce Python, se po dvou úspěšných ročnících v Brně bude letos konat v Praze, a to 8. až 10. června. Na konferenci letos zavítá např. i Armin Ronacher, známý především jako autor frameworku Flask, šablon Jinja2/Twig, a dalších projektů. Těšit se můžete na přednášky o datové analytice, tvorbě webu, testování, tvorbě API, učení a mentorování programování, přednášky o rozvoji komunity, o použití Pythonu ve vědě nebo k ovládání nejrůznějších zařízení (MicroPython). Na vlastní prsty si můžete na workshopech vyzkoušet postavit Pythonem ovládaného robota, naučit se učit šestileté děti programovat, efektivně testovat nebo si v Pythonu pohrát s kartografickým materiálem. Kupujte lístky, dokud jsou.
Přidat komentář

2.5.2017 9:20 /Eva Rázgová
Putovní konference československé Drupal komunity "DrupalCamp Československo" se tentokrát koná 27. 5.2017 na VUT FIT v Brně. Můžete načerpat a vyměnit si zkušenosti z oblasti Drupalu 7 a 8, UX, SEO, managementu týmového vývoje, využití Dockeru pro Drupal a dalších. Vítáni jsou nováčci i experti. Akci pořádají Slovenská Drupal Asociácia a česká Asociace pro Drupal. Registrace na webu .
Přidat komentář

1.5.2017 20:31 /Pavel `Goldenfish' Kysilka
PR: 25.5.2017 proběhne v Praze konference na téma Firemní informační systémy. Hlavními tématy jsou: Informační systémy s vlastní inteligencí, efektivní práce s dokumenty, mobilní přístup k datům nebo využívání cloudu.
Přidat komentář

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

> Poslední diskuze

18.9.2017 14:37 / Rojas
high security vault

15.9.2017 7:33 / Wilson
new zealand childcare jobs

31.8.2017 12:11 / Jaromir Obr
Re: ukůládání dat ze souboru

30.7.2017 11:12 / Jaromir Obr
Národní znaky

27.7.2017 12:24 / Jaromir Obr
Cteni/zapis

Více ...

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