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

> HTML (5) - obrázky

Je na čase oživit naše stránky obrázky...

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

Vložení obrázku do stránky není nijak složité, jak by si někdo mohl možná myslet. Nejdůležitější je znát URL obrázku, který chceme na své stránce zobrazit. Ideální je, pokud máte obrázek nahraný na svém "domovském" serveru (případně ještě někde zálohovaný), ale samozřejmě je možné vložit obrázek i z jiné stránky. Pro tuto možnost hovoří to, že ušetříte místo na svém serveru. Ovšem na druhou stranu je to trochu risk: stačí, aby si webmaster serveru, ze kterého si půjčujete obrázek, vzpomněl a přejmenoval soubor nebo ho dokonce smazal. V takovém případě se na vaší stránce zobrazí jen prázdný rámeček s popiskem obrázku, což jistě návštěvníka nepotěší. Další nevýhodou je to, že při načítání stránky se musí kontaktovat i další server, takže se doba natažení obrázku trochu prodlouží.

Pokud už jsme se rozhodli odkud budeme brát obrázky pro své stránky, můžeme začít psát kód pro vložení obrázku do stránky. Základem všeho je tag <img>, který je nepárový, a jeho nejdůležitější atribut je src="", kterým určíme umístění vkládaného obrázku. Hodnotou tohoto parametru může být buď absolutní nebo relativní URL obrázku. Relativní URL se zadává stejně jako v shellu, takže pokud máte v nadřazeném adresáři např. soubor logo.png zadejte pro jeho vložení do stránky tento kód:

<img src="../logo.png">

Dalším důležitým atributem je alt="". Tímto atributem předáváme prohlížeči alternativní popisek obrázku, tj. popisujeme co je na obrázku pro případ, že bude nedostupný nebo že bude návštěvník používat textový prohlížeč nebo aby se návštěvník rozhodl jestli ho vůbec chce stahovat. :) Každý obrázek by měl mít nastavený atribut (dokonce se to vyžaduje) alt="", aby byly stránky "plnohodnotné" i v textové formě. Jazyk, kterým je alternativí text napsán se určuje podle hodnoty atributu lang="".

POZOR: Teď bych rád trochu odbočil a upozornil na jednu z mnoha chyb jednoho zatím (bohužel) majoritního prohlížeče od nejmenované malé měkké firmy. Pokud použijete atribut alt="" a vynecháte atribut title="", který má pro obrázky stejný význam jako pro všechny ostatní tagy, co jsme dosud probrali, vezme si tento prohlížeč alternativní popisek obrázku i pro atribut title="", takže po najetí kurzoru na obrázek se objeví bublinka s alternativním popiskem. Pokud se tomu chcete vyhnout, použijte tento kód, není sice nijak elegntní, ale funguje (pokud někdo znáte lepší způsob napište mi prosím do diskuze nebo na mail):

<img src="../logo.png" alt="alternativní popisek" title="">

Dále by vás měly zajímat atributy width="" a height="", pomocí kterých dopředu sdělíte prohlížeči, jak velký obrázek se bude do stránky vkládat, a tím ušetříte prohlížeči práci s přeformátováváním stránky po načtení obrázku. Nyní jsou ale tyto atributy vytlačovány CSS - W3C consorcium se tak snaží očistit HTML od zbytečných tagů a atributů a vrátit mu jeho původní účel: vyznačení struktury dokumentů. Pokud jste v HTML nováčci, nedělejte si s tím zatím příliš hlavu, až si zažijete HTML, naučíte se CSS a stránky si přepíšete. :)

Jméno obrázku pro identifikaci ve scriptovacích jazycích můžete vytvořit dvojím způsobem: pomocí atributu name="" - tento atribut zůstává už jen kvůli zpětné kompatibilitě kódu; nebo přes modernější atribut id="".

Ve standardu HTML je také definován atribut longdesc="", kterým specifikujeme adresu podrobnějších informací o obrázku. Pokud je obrázek "klikací mapou" specifikuje tento atribut i informace o klikací mapě a její obsah.

Dalším speciálním atributem je usemap="", který specifikuje rozložení aktivních a pasivních oblastí na obrázku. Každá mapa má nějaké jméno, kterým se později volá. Vice o klikacích mapách se dozvíte v příštím díle.

Ostatní atributy si krátce představíme v tradiční tabulce:

Atribut Hodnota Význam
id libovolný text Hodnotou atributu je text (znakový řetězec), který je jednoznačným identifikátorem prvku v dokumentu. Tento atribut využijete třeba při oživování stránek pomocí JavaScriptu.
class libovolný text Hodnotou atributu je třída definovaná v tabulce prvků CSS, podle které se prvek zformátuje.
lang zkratky označující jazyk, např.: en, cz, sk Hodnotou atributu určujeme jazyk, kterým je psaný alternativní popisek. Podle zvoleného jazyka se aktivují různé konvence používané v konkrétních jazycích (např.: francouzské uvozovky).
dir rtl Určuje směr textu zprava doleva.
ltr Určuje směr textu zleva do prava.
title libovolný text Určuje titulek obrázku, který se v některých prohlížečích zobrazí jako bublinková nápověda po najetí kurzoru na obrázek.
style příkazy jazyka CSS, např. color : red; Pomocí tohoto atributu můžete nadefinovat, jak se má zobrazit určitý logický styl. Můžete využít všechny možnosti, které CSS nabízí.
align bottom Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je součástí řádky a jeho spodní linka je zarovnána s řádkou. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
middle Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je součástí řádky a je vzhledem k řádce vycentrován. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
top Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je součástí řádky a jeho horní linka je zarovnána s řádkou. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
left Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je u levého okraje stránky a je obtékán textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
bottom Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je u pravého okraje stránky a je obtékán textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
border rámeček okolo obrázku v pixelech Nastavuje šířku rámečku okolo obrázku. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
hspace odsazení textu zleva a zprava od obrázku v pixelech Nastavuje velikost mezery mezi obrázkem a okolním textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
vspace odsazení textu shora a zdola od obrázku v pixelech Nastavuje velikost mezery mezi obrázkem a okolním textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.

Samozřejmě že i obrázky mají atributy využitelné ve spojení se scriptovacími jazyky.

Povolené atributy spojené s JS v logických stylech
Atribut Význam
onclick Příkazy zadané jako hodnota proběhnou při kliknutí na obrázek
ondblclick Příkazy zadané jako hodnota proběhnou při dvojkliku na obrázek
onmousedown Příkazy zadané jako hodnota proběhnou při stisku tlačítka myši na obrázku
onmouseup Příkazy zadané jako hodnota proběhnou po stisku tlačítka myši (po uvolnění tlačítka) na obrázku
onmouseover Příkazy zadané jako hodnota proběhnou při přejetí kurzoru nad obrázkem
onmousemove Příkazy zadané jako hodnota proběhnou při pohybu kurzoru nad obrázkem
onmouseout Příkazy zadané jako hodnota proběhnou poté, co kurzor opustí prostor nad obrázkem
onkeypress Příkazy zadané jako hodnota proběhnou při stisku klávesy na klávesnici
onkeydown Příkazy zadané jako hodnota proběhnou při pohybu klávesy dolů (událost nastane ještě před úplným stisknutím klávesy)
onkeyup Příkazy zadané jako hodnota proběhnou při pohybu klávesy nahoru (událost nastane až při návratu klávesy do nestisknutého stavu)

V příštím díle dokončíme obrázky, probereme si klikací mapy.

Verze pro tisk

pridej.cz

 

DISKUZE

Zarovnání obrázku na střed 25.2.2006 19:45 Standa Novák
  L Re: Zarovnání obrázku na střed 25.2.2006 20:12 o.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