Archiv pro štítek: HTML

HTML: Prokliknutelná část obrázku

HTMLVytvoření odkazu z obrázku vloženého v rámci tagu img není nic složitého, stačí pouze v kódu zápis obalit s pomocí a. Jak však postupovat, když chceme povolit prokliknutí jen na určitých místech? Velmi jednoduchý postup představuje zavedení tzv. klikací mapy.

Zmíněná mapa využívá tag map s atributem name, který je velmi důležitý, protože udává pojmenování, s jehož pomocí se následně klikací oblast propojí s obrázkem. Uvnitř mapy nalezneme tagy prozrazující konkrétní místa chovající se jako odkazy. Jejich cíl určuje href. Definovat se dále musí tvar prokliknutelného objektu s pomocí shape. Obvykle se zde nachází rect z anglického rectangular, tedy obdélník. Vytvořit lze dále i kruh. O nepravidelné tvary se postará hodnota polygon udávající nasazení mnohoúhelníku. Coords popisuje konkrétní pozici, v případě obdélníku zadáváte v pixelech souřadnice levého horního a pravého dolního rohu. U kruhu určíte pouze střed a poloměr. Jak správně tušíte, nejvíce práce nastává u mnohoúhelníku, kdy nezbývá než definovat jednotlivé body – vrcholy. Dosud jsem si však vždy vystačil s obyčejným obdélníkem.

Konkrétní HTML pak může vypadat například následovně:

<map name="JmenoMapy">
<area href="index.php" shape="rect" coords="5, 5, 20, 20">
<area href="login.php" shape="rect" coords="25, 25, 50, 50">
</map>

<img src="obrazek.png" usemap="#JmenoMapy" width="100" height="100">

Povšimněte si atributu usemap u obrázku, který s hashtagem odkazuje na mapu.

Tip na automatický nástroj

Dost bylo teorie, pojďme k praxi. Nic vám samozřejmě nebrání v nakódování potřebného HTML ručně, osobně však používám online pomůcku, která všechnu práci udělá za mě. Nachází se na image-maps.com a nejprve vás donutí nahrát obrázek, jehož mapu budete tvořit. S pomocí WYSIWYG rozhraní přetáhnete obdélníky na místa, jenž se mají stát odkazem a určíte jejich cíl (atribut href). Po dokončení je automaticky vygenerován HTML kód, který stačí jen zkopírovat. Obsahuje sice odkaz na použitý nástroj, nic vám však nebrání v jeho odstranění.

Atributy jako selektory v CSS

S největší pravděpodobností už víte, jak s pomocí CSS určité pravidlo týkající se formátu přiřadit kýženým prvkům na webové stránce. Buď uvedete název tagu, nebo se spolehnete na třídu, případně id.

#cerveny{
color: #FF0000;
}
<span id="cerveny" class="tucne">tento text bude červený</span>

Jako selektor ovšem může figurovat i atribut. Rozšiřme si proto ukázkový příklad a prakticky se podívejme, jak výběr konkrétního tagu funguje.

<span id="cerveny" class="tucny" rel="dulezite">tento text bude červený</span>

Nyní se na prvek odkážeme velmi jednoduše. Zapíšeme tag a v hranatých závorkách uvedeme atribut včetně jeho hodnoty.

span[rel="dulezite"]{
color: #FF0000;
}

Mezi tagem a následující otevírací hranatou závorkou neuvádějte mezeru.

Osobně se příležitostně potkávám se situací, kdy na načtené stránce potřebuji pozměnit nějaké prvky, typicky po dokončení ajaxové komunikace. Život mi poté usnadňují následující operátory, kterými lze nahradit rovnítko.

[rel*=dulezite]

Nyní to již začíná být zajímavé. Pokud hledáme řetězec kdekoliv v hodnotě atributu, použijeme *=.

<span id="cerveny" class="tucny" rel="pomerne-dulezite-sdeleni">tento text bude červený</span>
span[rel*="dulezite"]{
color: #FF0000;
}

[rel^=dulezite]

Pokud znáte základní syntaxi regulárních výrazů, možná už tušíte, s jakými vlastnostmi tento operátor přichází. Bude platný pro všechny hodnoty, které začínají uvedeným řetězcem.

<span rel="dulezite-sdeleni">tento text bude červený</span>
span[rel^="dulezite"]{
color: #FF0000;
}

[rel$=dulezite]

Ze shodného soudku pochází symbol dolaru následovaný rovnítkem. Opět zde máme souvislost s regulárními výrazy. Tentokrát jsou vybrány všechny atributy, jejichž hodnoty končí uvedeným řetězcem.

<span rel="toto-je-dulezite">tento text bude červený</span>
span[rel$="dulezite"]{
color: #FF0000;
}

[rel~=dulezite]

V CSS může jeden prvek náležet do více tříd a přitom se během používání selektorů nic nemění. V případě atributů tomu tak však není. Pokud se kýžená hodnota atributu nachází v seznamu odděleném mezerami, použijeme ~=.

<span rel="tajne dulezite nezapomenout">tento text bude červený</span>
span[rel~="dulezite"]{
color: #FF0000;
}

[rel|=dulezite]

Pokud se vám rozlišení jednotlivých hodnot pomocí mezer nelíbí, lze se spolehnout i na pomlčku (přesněji řečeno jde o spojovník, tedy symbol nacházející se přímo na klávesnici).

<span rel="tajne-dulezite-nezapomenout">tento text bude červený</span>
span[rel|="dulezite"]{
color: #FF0000;
}

Ještě se sluší poznamenat, že může následovat několik výběrů atributů za sebou.

<span title="zajimave" rel="tajne-dulezite-nezapomenout">tento text bude červený</span>
span[title="zajimave"][rel*="dulezite"]{
color: #FF0000;
}

Uvedené techniky podporují všechny moderní webové prohlížeče. S plnou podporou přichází i Internet Explorer 7, nulovou však nabízí Internet Explorer 6. Pokud si selektory v podobě atributů oblíbíte, může se vám hodit odkaz na projekt :select[ivizr], jenž slibuje, že přivede k životu řadu funkcí nastíněného rázu v prohlížečích, které jimi běžně nedisponují.

Vlastní HTML podpis pro Gmail

Tento velmi krátký článek vám prozradí, jak si ve službě Gmail nastavit vlastní HTML podpis. I když během zadávání formátovaného textu není možné přepnout zobrazení do zdrojového kódu, řešení je překvapivě jednoduché a funkční.

Začneme tím, že si vytvoříme klasický HTML soubor a do něj zapíšeme podpis v požadované podobě. Použít můžeme i obrázky z externím serverů (v mém případě používám logo operačního systému Ubuntu). Výsledek může vypadat například takto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title></title>
</head>
<body>

<div>
 <div>
 <span style="font-size: 1.3em"><strong>Jméno Příjmení</strong></span>
 </div>
 
 <div> 
 <em>Adresa</em>
 </div>

 <div>
 <img src="http://assets.ubuntu.com/sites/ubuntu/latest/u/img/logos/logo-ubuntu-orange.png" />
 </div>
 
</div>

</body>
</html>

Tvorba HTML podpisu

Nyní celý obsah lokální stránky označte (CTRL + A) a zkopírujte do schránky (CTRL + C).

Následně zavítejte na Gmail. Klikněte na ozubené kolo v pravém horním rohu a zvolte Nastavení. Již v první záložce Obecné se nachází část Podpis. Zde do zobrazeného pole vlože obsah schránky (CTRL + V) a změnu uložte s pomocí tlačítka situovaného na úplném konci stránky.

HTML podpis ve službě Gmail

A to je vše, nyní se Gmail naučil používat HTML podpis a bude jej automaticky vkládat ke všem odeslaným zprávám.

Zpráva s HTML podpisem

Příchozí dotazy:

  • html podpis do mailu