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.

Drupal: Formularz z auto uzupełnianiem i dynamicznym dodawaniem pól

Opublikowano // Twój komentarz
Na potrzeby jednego z projektów stworzyłem sobie prosty moduł generujący formularz służący do składania zamówień na produkty. 
Formularz składa się z dodawanych poprzez AJAX pól tekstowych które mają  autouzupełnianie wpisywanych nazw produktów.
W konfiguracji podajemy kategorię (tymczasem tylko jedną, ponieważ tyle mi wystarczyło) z której są pobierane nazwy produktów oraz e-mail na który zamówienie ma być wysyłane.
Wypada też dodać sensowne komentarze w kodzie :)

Zapraszam do pobierania, zgłaszania krytycznych uwag, sugestii oraz do commitowania 
http://drupal.org/sandbox/fadehelix/1387290

Póki co moduł jest w fazie bardzo roboczej (rozwojowej) - nie stworzyłem jeszcze do niego testów oraz muszę w końcu wymyślić jak dodać w ustawieniach ścieżkę do formularza.
Za sugestie z góry dziękuję :)