Przejdź do głównej zawartości

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

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.

Komentarze

Popularne posty z tego bloga

Zbuduj sobie zespół. Z klocków Lego.

Najlepsze architektury, wymagania i projekty powstają w samoorganizujących się zespołach. 

Krótkie podsumowanie Drupal Global Sprint Weekend

Z parodniowym opóźnieniem, ale w końcu udało mi się napisać parę słów o Drupal Global Sprint Weekend podczas którego na całym świecie zespoły entuzjastów drupala pracowały nad naprawą zgłoszonych błędów, rewizją tychże poprawek oraz, jak to w społeczności, dyskutowały na temat różnych rozwiązań, które powinny zostać poprawione, lub nawet zaimplementowane w Drupalu 8. Było to bezcenne doświadczenie zarówno dla mnie, jak i pozostałych uczestników we Wrocławiu, bo mieliśmy idealną okazję, aby wgłębić się w kod D8 oraz zaznać esencji open source poprzez review bugów oraz dyskusje z innymi uczestnikami eventu rozsianymi po całym świecie. Tylko my, cola, chipsy, pizza i Drupal 8 :) Dla mnie osobiście było to pierwsze zderzenie z prawidłowo rozumianym Open Source, gdzie każdy ma swój wkład w całość, a obecność wielu innych ludzi z całego świata i z różnym doświadczeniem działa bardzo stymulująco na motywację. Największym plusem była możliwość porozmawiania z "mentorami", czyli