W HTML-u były znaczniki <map> oraz <area> które pozwalały tworzyć linki we fragmentach obrazka. Mechanizm ten nie satysfakcjonował specjalnie ludzi, którzy rozumieją sens separacji treści od prezentacji, dlatego wymyśla się różne sposoby, aby analogiczny rezultat osiągnąć za pomocą samego tylko CSS.

Oto, jak zrealizowałem mapkę z propozycjami wakacyjnymi na stronie Xaverianum.

Zacznijmy od kodu XHTML:

<h1 id="homepage-map">A co z wakacjami?</h1>
<ul id="homepage-map">
 <li id="jdm">
  <a href="/wakacje/jdm" title="Jubileuszowe X Jezuickie Dni Młodzieży (JDM) w Świętej Lipce na Mazurach">
   <strong>Jezuickie Dni Młodzieży</strong>
   <small>w Świętej Lipce</small>
   <span></span>
  </a>
 </li>
 <li id="pielgrzymka">
  <a href="/wakacje/pielgrzymka" title="Pielgrzymka parafialna (pomarańczowa trójka)">
   <strong>Pielgrzymka</strong>
   <small>na Jasną Górę</small>
   <span></span>
  </a>
 </li>
 <li id="bialy">
  <a href="/wakacje/bialy" title="26. obóz adaptacyjny duszpasterstw akademickich Wrocławia i Opola w Białym Dunajcu w Tatrach">
   <strong>Obóz adaptacyjny</strong>
   <small>w Białym Dunajcu</small>
   <span></span>
  </a>
 </li>
</ul>

Mamy zatem zwykłą listę zawierającą linki, ze zwykłymi tekstami. Jedyne, co tutaj szczególne, to pusty znacznik <span/> – w idealnym świecie niepotrzebny, zaś w świecie wciąż zamieszkałym przez Internet Explorera 7 i starsze – konieczne, aby osiągnąć zamierzony cel.

W tle listy wstawmy obrazek z mapą Polski, używając atrybutu padding przesuńmy napisy, żeby jej nie zasłaniały i – uwaga – włączmy pozycjonowanie relatywne (przyda się za chwilę).

ul#homepage-map {
position: relative;
margin: 0; padding: 140px 0 0 0;
background: url(../images/homepage-map.png) no-repeat left top;
height: 460px;
}

Elementom listy <li/> ustawmy ładne tła.

#jdm {
background: url(../images/jdm-bg-hover.png) no-repeat;
}

Podobnie można ustawić tła linkom (które mają wyświetlanie blokowe i wypełniają cały obszar <li/>).

#jdm a {
background: url(../images/jdm-bg.png) no-repeat;
}

Teraz pierwsze czary-mary: Tło pod <li/> będzie tym “podświetlonym”, zaś tło pod <a/> – tym “niepodświetlonym”. Jesli dodamy teraz

#jdm a:hover {
background: none;
color: #503830;
}

to po najechaniu myszką, tło pod <a/> będzie znikać, ozsłaniając tło pod <li/>. Dzięki tej prostej sztuczce – przeglądarki pobierać będą oba obrazki od razu. Gdybyśmy ustawiali “zwyczajnie” – jedno tło dla a, a drugie dla a:hover, te drugie pobrałoby się dopiero w momencie wskazania myszką linka i przez to nie wyświetliło natychmiast.

Przejdźmy jednak do istoty zagadnienia. Tajemniczemu elementowi <span/> nadajmy pozycję absolutną i ustawmy go we właściwym miejscu mapki:

ul#homepage-map span {
display: block;
position: absolute;
cursor: pointer;
}
#jdm span {
left: 375px;
top: 160px;
width: 120px;
height: 140px;
}

Zwróć teraz uwagę, drogi czytelniku, względem czego ten span będzie się pozycjonował. Otóż, względem najbliższego przodka, który ma pozycjonowanie relatywne lub absolutne. Zarówno <a/>, jak i <li/> mają pozycjonowanie statyczne, a więc szukając punktu odniesienia, <span/> trafi na <ul/>.

Ot, cała filozofia. Działający przykład tego rozwiązania znajdziecie na stronie promującej Jezuickie Dni Młodzieży, na które – swoją drogą – serdecznie zapraszam.

Na koniec nie przetestowana idea: teoretycznie, można się pozbyć tego elementu <span/>, który zaśmieca kod i zamiast niego zastosować pseudoelement a::after. Gdyby tylko IE7 zniknęło z rynku…