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

1 komentář u „HTML: Prokliknutelná část obrázku

  1. Alerin

    Krásné načasování článku, zrovna dnes jsem se po podobné informaci sháněl a Google mi vyplivl pouze Vás, takže vážně krásné, v AJ by se mi to řešit nechtělo.

    Sám jsem s HTML trochu na štíru (ač je to, přiznám se, celkem ostuda).
    Vše jsem se naučil poctivým opakováním stále dokola na diskuzních fórech, aspoň k něčemu jsou a nemusí mi čas tam strávený připadat jako úplně vyhozený z okna, ale samozřejmě mám ještě hodně co dohánět. (I když kdo dneska ne:-))

    Jak jste se naučili základy HTML vy?
    A jaký je váš oblíbený programovací jazyk?

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>