09-08-2010, 16:03
szczerze mówiąc MAPA to już stare rozwiązanie. Teraz raczej korzysta się ze stylowanych list. Ogólna zasada:
UL - to obrazek w tle. Ma pozycjonowanie relatywne
LI - kolejne "obszary" ,a które można kliknąć. Pozycjonowane absolutnie. Mają w sobie A
I wtedy kazdy taki link pozycjonujesz absolutenie:
Plusy takiego rozwiązania to większa dostepność (lista linków) + że możesz sobie do każdego takiego linka wstawiać co tylko dusza zapragnie - np dodatkowe tooltipy iyp.
UL - to obrazek w tle. Ma pozycjonowanie relatywne
LI - kolejne "obszary" ,a które można kliknąć. Pozycjonowane absolutnie. Mają w sobie A
Kod:
<ul id="mapa">
<li href="" id="li1"><a href="...">Pierwsze miejsce na obrazku</a></li>
<li href="" id="li2"><a href="...">Drugie miejsce na obrazku</a></li>
<li href="" id="li3"><a href="...">Trzecie miejsce na obrazku</a></li>
</ul>
Kod:
#mapa {background:url(...obrazek...) no-repeat; width:527px; height:395px; position:relative; overflow:hidden;}
#mapa li {overflow:hidden; display:block; position:absolute;}
#mapa li a {width:100%; height:...px; display:block; text-indent:-9999px; overflow:hidden;}
#li1 {left:....px; top:....px; width:....px; height:....px;}
#li2 ....
#li3....