Skip to Content

Obrazové mapy pomocí CSS

Obrazové mapy umožňují specifikovat oblasti obrázku, které pak fungují jako oblasti reagující na kliknutí. Je mnoho možností jak dosáhnout efektu klikací mapy, například pomocí elementu map, který se v dokumentu nijak nezobrazuje, jen popisuje pomocí tagu area oblast na kterou se dá kliknout jako na odkaz. Dále k tomuto efektu můžeme využít technologii Flash a nebo právě kaskádové styly, jehož postup je zde popsán.
První věc, kterou musíme udělat, je obalit naše aktivní oblasti s odkazy do blokového elementu, který musí být pozicován relativně. Tento úkon je velmi důležitý, neboť umožňuje absolutně pozicovat ostatní elementy, jako například zde odkazy převedené na blokové pomocí vlastnosti display:block vůči hranám tohoto prvku. Dále do tohoto divu umístíme obrázek, který bude sloužit jako podklad pro naši mapu.
Také nesmíme zapomenout přemístit text odkazů z viditelného prostoru obrazovky pomocí záporné hodnoty text-indent. A jako poslední věc zbývá každý odkaz individuálně posunout do příslušného místa, to znamená specifikovat souřadnice jednotlivých oblastí a nadefinovat šířku a výšku aktivních oblastí.

HTML:
<div id="obrazek">
<a id="vyrobky" href="http://www.rukodelnevyrobky" title="Rukodělné výrobky">Rukodělné výrobky</a>
<a id="kosmetika" href="http://www.kosmetika-duha.cz" title="Kosmetika Duha">Kosmetika Duha</a>
<a id="elektronika" href="http://www.elektrosibera.cz" title="Elektro Sibera">Elektro Sibera</a>
</div>

CSS:

#obrazek {
position: relative;
width: 340px;
height: 255px;
background: url(nasevyrobky.png) no-repeat;
}
#obrazek a {
display: block;
position: absolute;
text-indent: -1000em;
}

#obrazek a:hover {
border: 1px solid #000;
}

#vyrobky {
width: 100px;
height: 100px;
left: 20px;
top: 24px;
}

#kosmetika {
width: 100px;
height: 97px;
left: 130px;
top: 24px;
}

#elektronika {
width: 100px;
height: 50px;
left: 130px;
top: 150px;
}