CSS mapa s popisky

Hlavní vlastnosti

  1. Nezávislé na JS,
  2. rozumný HTML kód – jednotlivé body jsou seznam:
    <ul>
    	<li><a href="">Název bodu<span></span><a> 
    	<p class='about'>Popis</p>
    </ul>
  3. částečná použitelnost při nedostupnosti obrázku,
  4. jednoduchá modifikace nepřílišnou závislostí na obrázku (nemusí se body do mapy natvrdo překreslovat).
  5. funkční od IE 7 včetně.

Řešení

  • Relativně posicovaný kontejner o rozměru obrázku,
  • absolutně posicované položky seznamu (body na mapě),
  • při :hoveru na <li> se objevuje odstavec s popisem,
  • samotný bod je prázdný <span> s rozměry 10 × 10 px, zakulacení lze od IE 9 včetně řešit vlastností border-radius v šířce čtverečku,
  • pomocí třídy .right lze přepnout umístění čtverečku zleva do prava.

Zjištění souřadnic

Souřadnice lze zjistit pomocí atributu ismap (souřadnice by se měli zobrazovat ve stavovém řádku prohlížeče za otazníkem a mřížkou*).

A dle toho vhodně upravit umístění:

<li style='left: 250px; top: 110px'><a href='#5'>Místo<span> <p class='about'>Popis</p>
  • Pokud se neobjevuje stavový řádek, po kliknutí se souřadnice přenesou do řádku adresního.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Kreslení v CSS

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Komentáře