Low-tech rozwiązanie
zagnieżdżone elementy z pozycji absolutnej
jeśli jesteś gotów wydać trochę więcej Czas, jest sposób, aby osiągnąć to dość dokładnie, bez konieczności używania Flash, Canvas, SVG, a nawet map obrazowych. W odróżnieniu od mapy obrazów pozwala w razie potrzeby zagnieżdżać powiązaną zawartość w każdym punkcie dostępowym (np. Wyskakujące okienka).
W najprostszym przypadku można użyć pojedynczego prostokątnego hotspotu dla każdego elementu układanki. Oczywiście znacznie ogranicza to zakres kształtów, które można wspierać (bez ingerowania w zachodzące na siebie elementy).
Ale jeśli weźmiesz ten znacznik hiperłącza i nadasz mu liczbę znaczników span-znaczników, i nadaj każdej z nich absolutną pozycję (w stosunku do hiperłącza) i zastosuj odpowiednią część obrazu na tle, możesz "konstruuj" nieregularne kształty obrazu, które zajmują jeden nieregularny punkt aktywny, przy stosunkowo niewielkiej ingerencji w zachodzące na siebie elementy.
W efekcie obraz (z obszarami przezroczystości) jest traktowany jako plik ikonki, z tagiem hiperłącza i znacznikami potomnymi, z których każda zajmuje jedną część "pliku ikonki". Większość przezroczystych części obrazu nie zostanie zajętych przez znacznik hiperłącza ani znaczniki zakresu.
Większość kształtów można prawdopodobnie zbudować za pomocą znacznika hiperłącza i 4 - 10 przęseł. Oczywiście, im bardziej nieregularne kształty, tym więcej rozpiętości będzie wymagało.
Zrobiłem to już wcześniej, aby utworzyć hotspoty dla każdego stanu na mapie USA, bez użycia mapy obrazu (lub Flasha, Canvas, SVG), i nie było to prawie tak problematyczne jak Ty myśleć.Po prostu zajmuje trochę czasu, aby dowiedzieć się szczegółów, jak podzielić każdy kształt na odpowiednią liczbę prostokątów.
Połów
Zaokrąglanie błędu na urządzeniach mobilnych
tu jest haczyk, i to doozy. Kiedy strona internetowa jest skalowana na urządzeniach mobilnych (a zwykła strona jest prawie zawsze skalowana na mniejszych urządzeniach), wprowadza błąd zaokrąglania, który powoduje, że rozmieszczenie px znacznika hiperłączy i znaczników span może się różnić o co najmniej 1 piksel w poziomie i/lub w pionie. Dzieje się tak również, gdy przeglądarki komputerów są skalowane; chodzi tylko o to, że przeglądarki desktopowe nie są często skalowane.
To, co się stanie, to skończyć z 1 pikselem separacji (lub nakładania się) między różnymi częściami każdego kształtu. W wielu przypadkach będzie to bardzo oczywiste i niedopuszczalne wizualnie. W zależności od implementacji lokalizacje mogą się różnić nawet o 2 lub 3 razy. Kiedy się pojawia, jest trudny do rozwiązania i istnieją ograniczenia co do tego, jak wiele z nich można rozwiązać.
Ostatnio sprawdziłem, Firefox jest jedyną przeglądarką, która jest wystarczająco inteligentna, jeśli chodzi o zaokrąglanie wartości px na skalowanych stronach, aby uniknąć tego problemu. Mam nadzieję, że inne przeglądarki ostatecznie ją wesprą, ponieważ nawet proste strony często cierpią z powodu błędów zaokrąglania.
Rozwiązanie
Osobne obrazy z hotspotów
Błąd zaokrąglenia nie ma większego problemu z hotspotów (gdzie precyzja nie jest ważna). Tam, gdzie to naprawdę powoduje problemy, dotyczy obrazów (kiedy obraz nie jest ustawiony w odpowiednim miejscu).
może być możliwe uniknąć najgorszego obrazu zaokrąglania błędów, wykonując następujące czynności:
- mieć jeden zestaw kodu HTML dla hotspotów, tak samo jak opisano powyżej, z wyjątkiem nie wykazują żadnej części zdjęć w hotspotach. Daj im wszystkie przezroczyste tła.
- Masz inny zestaw kodu HTML dla obrazów. Każdy byłby pojedynczym prostokątnym elementem wyświetlającym cały obraz.
- Umieść każdy obraz w tej samej pozycji, co powiązany hotspot.
- Upewnij się, że zestaw punktów aktywnych i zestaw zdjęć mają tę samą kolejność z-index. Wszystkie hotspoty będą widoczne na wszystkich obrazach, ale w obszarach aktywnych i wewnątrz obrazów kolejność musi być spójna.
- Po przeciągnięciu punktu aktywnego dla elementu, zaktualizuj położenie powiązanego obrazu, aby zachować je w tym samym miejscu. W efekcie obraz cienia punkt aktywny podczas jego przeciągania.
Nic nowego Wiem, ale moje dwie główne przeszkody w rozwijaniu tego to to, że musi działać w ie8 + i na urządzeniach dotykowych. Oznacza to więc brak błysku (gdzie byłoby to bardzo łatwe) i brak płótna (głupiego); co zostawia mnie z js i może svg?
SVG idealnie nadaje się do definiowania nieregularnych punktów dostępowych i jest naturalnym rozwiązaniem tego typu rzeczy. Jeśli jednak potrzebujesz wsparcia dla Androida 2.3 (Gingerbread) lub wcześniejszego, SVG nie jest opcją ([to nie jest obsługiwane] (http://caniuse.com/#search=svg)). Niestety, wydaje się, że jest to większość [rynku Android] (http://developer.android.com/about/dashboards/index.html). –
Uaktualniłem swoją odpowiedź, wprowadzając poprawione rozwiązanie, które powinno dawać pozycję powrotną (jeśli wszystkie inne opcje zawiodą, np. Explorercanvas i imagemaps). –