Nieregularne, klikalne kształty w HTML i CSS - szybkie studium przypadku

Opublikowano // Twój komentarz
Mamy do wyboru trzy drogi:
W zasadzie każda jest dobra i  wszystko zależy od naszych nawyków i tego, jaki mamy cel.


1. Imagemap

Przykład:


Jest to pierwszy i najszybszy sposób jeśli mamy w miarę nieskomplikowane kształty. Technika ta polega na - jak sama nazwa wskazuje - na nakładaniu na obrazek (<img>) interaktywnych obszarów <area>.
Znacznik <area> przyjmuje do parametru shape  trzy opcje: rect, circle, lub poly. Najciekawszy jest ten ostatni, ponieważ pozwala na stworzenie dowolnego kształtu. Wymaga "jedynie" policzenia sobie współrzędnych  punktów, ale to przestaje być problemem, jeśli skorzystamy z generatora takiego, jak np http://www.maschek.hu/imagemap/imgmap, który przy okazji generuje nam cały kod html.

Zalety: Szybkość i prostota tworzenia klikalnych obszarów.

Wady: Przede wszystkim brak możliwości dodania efektu typu zmiana koloru do stanu mouseover (jest to osiągalne dopiero przy użyciu pluginu do jQuery o nazwie Maphighligts).



2. CSS Sprites
Technika bardzo popularna przy wykonywaniu menu stron. W skrócie polega ona na stworzeniu jednej dużej grafiki zawierającej wygląd wszystkich stanów obiektu i przesuwanie jej.
Polecam tutorial na CSS Tricks.
Zabawa z użyciem tej techniki do nieregualrnych kształtów polega na stworzeniu "obszaru klikalnego" (lubię posługiwać się nazwą hit area używaną w ActionScript) z większej ilości niewidocznych elementów osadzonych wewnątrz naszego obiektu. Gwoli uczciwości podejrzałem ten sposób analizując klikalną mapę Polski, do której twórcy mam wielki szacunek.
Na szybkości napisałem sobie narzędzie do generowania kodu CSS tychże małych elementów po narysowaniu sobie ich: https://github.com/fadehelix/IsCSSGenerator.

Zalety: Możliwość dowolnej modyfikacji wyglądu stanów.

Wady: W przypadku nieregularnych kształtów duża praco i czasochłonność.


3. RaphaelJS
Bilioteka http://raphaeljs.com/ działa na bazie elementu <canvas>. Szczerze mówiąc, w moim konkretnym przypadku, odsiałem to rozwiązanie na samym początku, ale lepiej przyjrzeć się tej bibliotece w wolnym czasie, ponieważ widać, że pozwala na bardzo dużo.