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

#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í.

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>

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.

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.