DeBlog

Ostatnimi czasy po raz kolejny, przy okazji tworzenia serwisu narciarskiego, musiałem stworzyć obsługę mapki z krajami. Same linki do poszczególnych krajów same w sobie nie stanowią żadnego problemu. Pojawia się on w momencie gdy dany kraj po najechaniu na jego terytorium, ma się podświetlić.

Przykład:
http://blog.desmart.com/wp-content/uploads/2008/mapa/

Rozwiązanie:

HTML:

JS (wymaga biblioteki
mootools):

Opis:

Obiekt JS dodaje do każdego z elementów <area> akcje mouseover i mouseout. Po najechaniu na kraj pobierany jest jego id które umożliwia ustawienie odpowiedniej classy elementowi #hover_el. W plikach css zdefiniowane są pozycje x i y, grafiki z podświetlonymi poszczególnymi krajami oraz ich rozmiary. Dzięki temu element #hover_el pojawia się w odpowiednim miejscu. Event mouseout służy tak naprawdę tylko do usuwania jakiegokolwiek zaznaczenia, gdy użytkownik wyjedzie poza mapkę.

Do rozwiązania pozostał jeszcze jeden problem. Element #hover_el jest divem więc nijak nie zmusimy go aby był poligonem (zawsze będzie prostokątem). Przesuwając więc kursor z jednego kraju o nieregularnym kształcie na inny nierzadko mogliśmy spotkać się z sytuacja gdy podświetlenie nie znikało z poprzedniego kraju, ponieważ kursor wciąż znajdował się na aktywowanym elemencie. Oto przykład:

Przedstawiony powyżej kod posiada już obejście tego problemu. Nakłada on mapę odsyłaczy nie na sam plik z mapą ale na przeźroczystego gifa:

<img src=”/images/blank.gif” id=”big_map_europe_dot” usemap=”#map-europe” alt=”"/>

który znajduje się na samej górze, pod nim przemieszczany jest #hover_el a na samym dole wyświetlana jest mapa.

Takim oto sposobem możemy cieszyć oko funkcjonalną mapą europy :)