O webu
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.