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

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ů

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

14.5.2018 7:28 /František Kučera
Květnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 17. 5. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: Audio – zvuk v GNU/Linuxu.
Přidat komentář

7.5.2018 16:20 /František Kučera
Na stránkách spolku OpenAlt vyšla fotoreportáž Pražské srazy 2017 dokumentující srazy za uplynulý rok. Květnový pražský sraz na téma audio se bude konat 17. 5. 2018 (místo a čas ještě upřesníme).
Přidat komentář

17.4.2018 0:46 /František Kučera
Dubnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 4. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tématem tohoto srazu bude OpenStreetMap (OSM) aneb svobodné mapy.
Přidat komentář

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

> Poslední diskuze

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í?

16.1.2018 1:08 / Ivan Pittner
verejna ip od o2 ubuntu

15.1.2018 17:26 / Mira Harvalik
Re: Jak udělat HTML/Javascript swiping gallery do mobilu?

30.12.2017 20:16 / Michal Knoll
odmocnina

Více ...

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