Dostępna mapka w CSS
Wziąłem się w końcu do pracy - niby proste, małoambitne zlecenie, ale jak się okazało trochę musiałem pogłówkować. Otóż miałem do zrobienia mapkę polski, gdzie można wybrać województwo kliknąć w nie i przejść pod dany adres. Standardowo robi się to przez <map> i <area shape>.
Do CSS Superstar jeszcze mi daleko, ale postanowiłem nie iść na łatwiznę i zrobić to w CSS`ie- wcześniej wspomniana metoda utrudnia dostęp osobom korzystającym np. z czytników ekranu. Gdzieś już takie rozwiązanie widziałem, ale oczywiście teraz doszukać się nie mogłem i musiałem wszystko zrobić sam ;) Jeszcze trzeba trochę poprawić, ale zamierzony efekt osiągnąłem
Dużo jest niepotrzebnego, źle zapisanego kodu, ale jak to często bywa IE inaczej nie zgodzi się na współpracę.
Poza tym przydałoby się wszystkie obrazki scalić w jeden- teraz jest ich tam 6, a to stanowczo zbyt dużo.
A jeśli kojarzycie taką mapkę z innych źródeł dajcie znać, chętnie porównam swoje wykonanie z innymi.
Mappet by Riddle okazuje się bardzo przydatny przy budowie takiej mapki- edytujemy w WYSIWYG - nie trzeba klepać całego kodu z palca
Komentarze:
-
Fajny bajer z podświetlaniem. Zobacz też mojego Mappeta
-
Efekt fajny, jednak sporo motania w nim jest.
Ja bym zrobił standardową mapkę na <area>, a obok listę województw – wolę jednak klikać na tekst.
-
@Speedy: Wyłącz style i masz normlną listę z klikalnym tekstem.
Area jest o tyle zła, że kuleje z dostępnością i powinno się jednak szukać alternatywy.Dzięki Riddle, Mappeta już widziałem, ale jakoś nie skojarzyłem, że może zaoszczędzić mi sporo czasu.
-
Area zły? A atrybut alt? ;)
A zresztą, spójrzcie na parę przykładów na stronach W3C czy też na przykład napisany przeze mnie ;).
-
tak mi się skojarzyło, ja kiedyśtam z nudów, zrobiłem sobie taką pierdułkę ;)
http://gim.org.pl/lokacja/loc_swiat.html
ale bez żadnych cssów :P -
Po całym dniu dłubania troszkę mapkę ulepszyłem – możecie ocenić
-
wzs – podpowiedź: daj elementom overflow: hidden; dzięki temu focus nie będzie odjeżdżał w lewo przez text-indent ;)
-
@d4rky:
OK, już wiem. Zapomniałem o focusie w Fx`ie. z tym że lepiej się go zupełnie pozbyć przezoutline: none; -
w CSS ...
-
Tzn focus ucieka na lewo przy wszystkich linkach, kliknij na jakis to zobaczysz ze prostokat zaznaczenia leci daleeeeeeeeko w lewo
-
OK, zmieniłem ten pierwszy przykład.
A focus wolałem wogóle usunąć, bo zbyt pożyteczny w tym przypadku nie jest. (IE po swojemu nie przyswaja outline i trzeba używać JS, ale… użytkownicy IE chyba są do takich rzeczy przyzwyczajeni)
BTW: w operze domyślnie usunięto focus, wiec jakoś nie zwróciłem uwagi -
Cóż, głupia przeglądarka, głupie metody: onfocus=„blur(this)”...
-
Ale tak z onfocus dla kazdego linka? To już chyba lepiej jakoś tak:
@function focus() {
for (a=0; a<document.links.length;){
document.links[a].onfocus=document.links[a++].blur;
}
Podgląd:
O wpisie:
- Dodano:
- 25 maja 2007 22:35
- W:
- Tagi:
- Inne:
- Reklama:
