Nov 28 2008
Znacie na pewno termin “banner blindness” który określa rodzaj chwilowej ślepoty użytkownika na prezentowane mu bannery. Użytkownik podświadomie unika wzrokiem elementów mrugających lub też po prostu wyglądających jak bannery.
Ostatnio rozmawiając z programistami na temat problemu testowania aplikacji pisanych przez nich wpadłem na pomysł stworzenia terminu programmer blindness.
Nov 19 2008
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 :)
