Posiadanie różnych wersji IE na tym samym profilu nie jest zbyt fajnym rozwiązaniem. Przykładowo IE6 potrafi sobie przejąć część zachowań z IE8, lub innymi słowy mówiąc to IE8 wkrada się w silnik IE6 przez co przeglądarka czasami zachowuje się w sposób nieobliczalny.
Przykładowo: chcę dołączyć (w
komentarzu warunkowym) arkusz styli przeznaczony tylko i wyłącznie dla IE6 (lub niższych). W kodzie wszystko jest poprawnie zapisane, a moje IE jakimś cudem nie łapie zmian. Okazało się, że musiałem zmodyfikować komentarz warunkowy na:
Po tym triku nasz arkusz zostaje załączony. Wychodzi na to, że IE6 renderuje całość wg swoich kryteriów, natomiast identyfikuje się jako IE8. Sprawa trochę kłopotliwa gdyż wprowadza trochę problemów podczas pisania kodu. Można to obejść, lecz trzeba pilnować aby przed wystawieniem na produkcję poprawić ten komentarz warunkowy.
Zamiast instalować kolejne wersje IE można skorzystać z aplikacji
IETester. Program oferuje odpalenie dowolnej strony przy pomocy jednej z wersji IE. Razem z nim jest zainstalowany Debug Toolbar, który potrafi być bardzo przydatny. Wadą tego programu jest to, że czasami potrafi w zadziwiający sposób wyświetlać niektóre strony przez co ciężko jest poprawiać jakiekolwiek błędy.
Myślę, że to najwyższa pora przyłączyć się do frontu likwidacji IE6 =)
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 :)
