go to content | go to menu | przejdź do menu języków

Mapa świata - tylko html i css

Data:
4 luty 2007
Kategoria:
CSS, HTML i XHTML, Programowanie, Skrypty
Author:
Cezary Tomczyk

Większość jakichkolwiek map geograficznych, które spotykamy w internecie, tworzone są przy użyciu technologii java lub flash. Tymczasem obie technologie mają swoje wady dostępności, przez co niektórzy w ogóle mogą mapy nie zobaczyć/usłyszeć. Ponadto zmuszają nas do zainstalowania odpowiednich plugin-ów. Niemniej jednak można pokusić się o stworzenie mapy geograficznej przy użyciu tylko html i css. Na poniższym przykładzie pokażemy jak można taką mapę świata zbudować.

Zaczynamy od prostej listy kontynentów:

  1. <ol class="world-map">
  2. <li id="europe"><a href="#" title="Kontynent Europa"><span>Europa</span></a></li>
  3. <li id="america"><a href="#" title="Kontynent Ameryka Północna i Południowa"><span>Ameryka</span></a></li>
  4. <li id="asia"><a href="#" title="Kontynent Azja"><span>Azja</a></span></li>
  5. <li id="africa"><a href="#" title="Kontynent Afryka"><span>Afryka</a></span></li>
  6. <li id="oceania"><a href="#" title="Kontynent Oceania"><span>Oceania</a></span></li>
  7. </ol>

Następnie przygotowujemy odpowiednio plik graficzny z mapą tak, aby na samej górze była cała mapa świata, a pod nią wycięte, prostokątne fragmenty interesujących nas obszarów. Oczywiście każdy w dokładnie takiej pozycji, w jakiej jest oryginalny fragment oraz w sposób wyróżniony.

Mapa świata - tworzenie grafiki

Potem wystarczy już tylko spozycjonować odpowiednio blok <a>...</a> i cała mapa gotowa: http://www.ikeris.com/lab/world-map/world-map.php. Podane rozwiązanie działać powinno w każdej przeglądarce, a i współpraca z czytnikami ekranu nie powinno sprawiać kłopotów. Wadą tego rozwiązania jest to, że pewne obszary nakładają się. Nie można też wyznaczyć dokładnych krawędzi, ponieważ wszystko oparte jest o prostokątne bloki.

Następny lub poprzedni wpis

Twój komentarz

(required)
(required)

Szukaj