Mapy odsyłaczy a mapy :)

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:

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

	<map id="map-europe" name="map-europe">
		<area href="/osrodki,pl/" id="pl" alt="Polska" title="Polska" shape="poly" coords="270,250,..." />
		<area href="/osrodki,cz/" id="cz" alt="Czechy" title="Czechy" shape="poly" coords="277,295,..." />
		<area href="/osrodki,sk/" id="sk" alt="Słowacja" title="Słowacja" shape="poly" coords="294,326,..." />
		<area href="/osrodki,at/" id="at" alt="Autria" title="Austria" shape="poly" coords="292,326,..." />
		<area href="/osrodki,de/" id="de" alt="Niemcy" title="Niemcy" shape="poly" coords="225,235,..." />
		<area href="/osrodki,it/" id="it" alt="Włochy" title="Włochy" shape="poly" coords="259,358,..." />
		<area href="/osrodki,ch/" id="ch" alt="Szwajcaria" title="Szwajcaria" shape="poly" coords="200,340,..." />
		<area href="/osrodki,fr/" id="fr" alt="Francja" title="Francja" shape="poly" coords="167,284,..." />
		<area href="/osrodki,no/" id="no" alt="Norwegia" title="Norwegia" shape="poly" coords="248,179,..." />
		<area href="/osrodki,se/" id="se" alt="Szwecja" title="Szwecja" shape="poly" coords="244,181,..." />
	</map>
	<div id="hover_el"></div>
</div>

JS (wymaga biblioteki mootools):

var MapHover = new Class({
  initialize: function(pContainer){
    $ES('area', pContainer).each(function(pEl){
      pEl.addEvent('mouseover', this.setHighlight.bind(this, pEl.getProperty('id')))
      pEl.addEvent('mouseout', this.removeHighlight.bindWithEvent(this, pEl.getProperty('id')))
    }.bind(this))
  },

  setHighlight: function(pId){
    $('hover_el').setProperty('class', pId);
  },

  removeHighlight: function(pE, pId){
    $('hover_el').setProperty('class', '');
  }

})

window.addEvent('domready', function(){
  new MapHover($('map-europe'));
});

Opis:

Obiekt JS dodaje do każdego z elementów
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:

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 :)