Zmiana koloru tła w area Opcje

[batman]

Problem dosyć nietypowy i w większości przypadków opisywany jako niemożliwy do obejścia.
Potrzebuję przy pomocy CSS (ewentualnie JavaScript) nadać kolor tła w tagu area. Nie byłoby w tym nic trudnego, gdyby nie dwie drobne przeszkody - po pierwsze area może zawierać kilkanaście (a nawet kilkadziesiąt) punktów, które tworzą bardzo nieregularny kształt. Po drugie, współrzędne punktów wstrzykiwane są do atrybutu coords przy pomocy JavaScript, co wyklucza użycie większości popularnych bibliotek js. Jak to zrobić?

[kamil4u]

Od razu napiszę, że nigdy nie miałem styczności z takim problemem, ale może uda mi się jakoś Ci pomóc. Dlatego też mam takie pytanie:

Po drugie, współrzędne punktów wstrzykiwane są do atrybutu coords przy pomocy JavaScript, co wyklucza użycie większości popularnych bibliotek js

Dlaczego wyklucza? Nie mogę sobie wyobrazić, że nie da się tego połączyć. Może pokusiłbyś się o proste demo np. na http://jsfiddle.net/ .

[!*!]

batman - jesteś moderatorem i nie wkleiłeś żadnego kodu?

gdyby nie dwie drobne przeszkody - po pierwsze area może zawierać kilkanaście (a nawet kilkadziesiąt) punktów, które tworzą bardzo nieregularny kształt.

Nie bardzo rozumiem, tło koliduje z tymi kształtami/elementami czy odwrotnie? I czy jest to tylko kolor, a nie obraz?

[batman]

batman - jesteś moderatorem i nie wkleiłeś żadnego kodu?

Moderator moderatorem, ale kodu udostępnić nie mogę ;)

Opiszę problem inaczej.
Mam na stronie kilkaset elementów. Do każdego elementu przypisane są współrzędne określające jakiś obszar obrazka. Obszar ten posiada nieregularne kształty, więc zastosowanie grafiki wymagałoby wycięcie kilkuset niewielkich grafik w kilku kolorach każda. Po najechaniu na każdy z elementów, na obrazku ma zaznaczyć się zdefiniowany wcześniej obszar (w zależności od parametrów - w różnych kolorach). I tutaj pojawia się problem, ponieważ w zdarzeniu onmouseover przekazuję do area współrzędne. Współrzędne te działają, obszar się "wyświetla" na obrazku, ale w żaden sposób nie mogę zmienić jego koloru. Innymi słowy, dodaje się obszar do obrazka, ale nie możliwe jest jest ostylowanie. Znalazłem kilka rozwiązań bazujących na canvas, jednak wymagają one, by współrzędne znajdowały się w area od razu, a nie były dynamicznie przekazane.
Jak to ugryźć? Może podchodzę do problemu z niewłaściwej strony?

[!*!]

Nadal nie rozumiem, skoro przekazujesz przez JS dane współrzędne, to dlaczego nie możesz przekazać danych o kolorach? Jak wygląda kolizja, bo nie ma czegoś takiego "nie mogę ostylować obrazka, bo nie".

[kamil4u]

Znalazłem kilka rozwiązań bazujących na canvas, jednak wymagają one, by współrzędne znajdowały się w area od razu, a nie były dynamicznie przekazane.

Jak dla mnie canvas tu pasuje. Gorzej oczywiście z IE I nie za bardzo rozumiem, co znaczy, że "wymagają". Może da się to w łatwy sposób obejść albo ew. przepisać odpowiedni fragment kodu. Więc może się powtórzę:

Dlaczego wyklucza? Nie mogę sobie wyobrazić, że nie da się tego połączyć. Może pokusiłbyś się o proste demo np. na http://jsfiddle.net/ .

I koniecznie dodaj linki do skryptu z canvas-em.

ale kodu udostępnić nie mogę

To chociaż proste demo zrób, bo nadal nie jestem pewny czy dobrze to rozumiem. Bo jednak nie jest skrypt, który dałoby się napisać w 5min, więc musisz trochę sekretów zdradzić

[batman]

I koniecznie dodaj linki do skryptu z canvas-em.

Najlepszą biblioteką, która prawie działa jest http://www.outsharked.com/imagemapster/. Prawie oznacza tutaj, że tworzy się canvas, ale niestety nie jest widoczny (sprawdzone w Firebugu). Kombinowałem ze zmianą position, z-index i kilkoma innymi. Do kodu js jeszcze nie zaglądałem.

To chociaż proste demo zrób, bo nadal nie jestem pewny czy dobrze to rozumiem. Bo jednak nie jest skrypt, który dałoby się napisać w 5min, więc musisz trochę sekretów zdradzić

Zrobienie dema zajmie tyle samo czasu, ile robiłem stronę, więc niestety kodem się nie podzielę

Powód edycji: [batman]:

[kamil4u]

Heh. No to postaw się w naszej sytuacji. Napisałeś bardzo ogólnie jak to działa.Według mnie jedynym sensownym rozwiązaniem to canvas( jeżeli dobrze rozumiem jak to działa, a pewności nie mam ). Podałeś skrypt, który teoretycznie działa,a praktycznie "tworzy się canvas, ale niestety nie jest widoczny". No i teraz jak mamy Ci pomóc? Domyślić się czy coś jest źle w skrypcie czy może Ty gdzieś zrobiłeś błąd w swoim rozumowaniu? Czego od nas oczekujesz?

Zrobienie dema zajmie tyle samo czasu

Demo dla mnie oznacza, że:
- weźmiesz prosty rysunek z dwoma prostokątami
- za pomocą kodu JS wygenerujesz współrzędne - nawet zwykła tablica z danymi - to najmniej ważne
- współrzędne te dodasz do tego obrazka w podobny sposób jak robisz to u siebie( odpowiednią metodą DOM-oską jak się domyślam )
- dodasz skrypt canvas-u ( tu jeszcze mniej roboty )
- wszystko połączysz w podobny sposób jak u Ciebie( tu największy problem, ale oczekuję jak najprostszego kodu na jakimś błahym przykładzie, a nie 200 linijek Twojego kodu )

Który punkt jest dla Ciebie niewykonalny/zbyt długotrwały? Jeżeli to zajmie Ci podobny czas jak zrobienie Twojego skryptu to może podziel się kodem, bo to pisania na max. 20 minut( przynajmniej tak to sobie wyobrażam i może w ciąż dokładnie nie rozumiem jak to działa ).

Musisz wykazać trochę więcej zaangażowania, bo inaczej ciężko, żebyś uzyskał sensowną odpowiedź( przynajmniej z mojej strony ).

Zachęcam, żebyś przeczytał jeszcze raz temat i zobaczył czy byłbyś w stanie komuś pomóc, gdyby napisał tak zdawkowe informacje jak Ty.

Pozdrawiam i do roboty

Ten post edytował kamil4u 2.07.2012, 23:09:37

[batman]

Odbiegamy od tematu
Ponawiam pytanie. W jaki sposób nadać tło w tagu area, gdzie atrybut coords jest aktualizowany z poziomu js?

[d3ut3r]

wykorzystałem tą samą bibliotekę Image Mapster, nie wiem tylko czy o to chodziło

http://jsfiddle.net/k2Crx/2/

[batman]

wykorzystałem tą samą bibliotekę Image Mapster, nie wiem tylko czy o to chodziło

Firebug pokazuje mi błąd w js - mapArea is undefined.

[d3ut3r]

dziwnie się nie zapisała ostatnia wersja w jsfiddle, teraz powinno śmigać (testowane na chrome i ff):

http://jsfiddle.net/nd4Jn/

[batman]

Teraz działa. Sprawdzę popołudniu to co zrobiłeś na moim przypadku i może uda rozwiązać się ten problem.

[kamil4u]

Teraz działa. Sprawdzę popołudniu to co zrobiłeś na moim przypadku i może uda rozwiązać się ten problem.

To jest właśnie owe demo, o które Cię prosiłem, a które zrobił za Ciebie ~d3ut3r . Jak przeanalizujesz jego kod, to będzie się on pokrywał z moim:

Demo dla mnie oznacza, że:
- weźmiesz prosty rysunek z dwoma prostokątami
- za pomocą kodu JS wygenerujesz współrzędne - nawet zwykła tablica z danymi - to najmniej ważne
- współrzędne te dodasz do tego obrazka w podobny sposób jak robisz to u siebie( odpowiednią metodą DOM-oską jak się domyślam )
- dodasz skrypt canvas-u ( tu jeszcze mniej roboty )
- wszystko połączysz w podobny sposób jak u Ciebie( tu największy problem, ale oczekuję jak najprostszego kodu na jakimś błahym przykładzie, a nie 200 linijek Twojego kodu )

Możliwe, że sam byś sobie poradził z problemem( albo byśmy Cię odpowiednio nakierowali, gdybyś napisał to sam), ale w moim przekonaniu czekałeś na gotowca. I wcale nie jest to "Odbiegamy od tematu". Poza tym "Zrobienie dema zajmie tyle samo czasu, ile robiłem stronę, więc niestety kodem się nie podzielę wink.gif" jest mijaniem się z prawdą, jak sam doskonale zauważyłeś, bo wątpię, żeby ~d3ut3r pisał to pół dnia.

Pozdrawiam i życzę więcej zaangażowania, bo nie zawsze dostaniesz gotowca

--edit--
@down: Nie chcę już śmiecić Ci w wątku, dlatego wyedytuje posta.

Możliwe, że masz rację, ale ja patrzę tylko przez pryzmat Twoich postów. Poprosiłem Cię, żebyś coś zrobił, a Ty odpisałeś "Odbiegamy od tematu wink.gif". Po czym to samo zrobił ~d3ut3r i Ty mu dziękujesz, bo możliwe, że to jest rozwiązaniem Twojego problemu. No to jak to wgląda w moich oczach? Nie dziw się więc, że tak napisałem. Fakt, że znam Cię nijako na tym forum i że jesteś moderatorem trochę Cię usprawiedliwia, bo ponad 2500 postów nie wzięło się znikąd, ale jeśli chodzi o ten temat to trochę dałeś ciała

Bardzo możliwe, że problemem stanowi jakiś inny skrypt lub css. Z drugiej strony mogłem coś przegapić podczas podpinania biblioteki i to właśnie sprawdzę za kilka godzin.

No i jakbyś zrobił to demo to byś to wiedział, że nie możemy Ci pomóc, bo błąd jest gdzieś po Twojej stronie, a kodu nie pokażesz. A sama idea jest w porządku.

No i mam nadzieje, że ten cały problem jest warty tego zachodu i Ci się powiedzie nad tajemniczym skryptem. Powodzenia!

Ten post edytował kamil4u 3.07.2012, 14:06:02

[batman]

To jest właśnie owe demo, o które Cię prosiłem, a które zrobił za Ciebie ~d3ut3r . Jak przeanalizujesz jego kod, to będzie się on pokrywał z moim:


Możliwe, że sam byś sobie poradził z problemem( albo byśmy Cię odpowiednio nakierowali, gdybyś napisał to sam), ale w moim przekonaniu czekałeś na gotowca. I wcale nie jest to "Odbiegamy od tematu". Poza tym "Zrobienie dema zajmie tyle samo czasu, ile robiłem stronę, więc niestety kodem się nie podzielę wink.gif" jest mijaniem się z prawdą, jak sam doskonale zauważyłeś, bo wątpię, żeby ~d3ut3r pisał to pół dnia.

Pozdrawiam i życzę więcej zaangażowania, bo nie zawsze dostaniesz gotowca

Źle mnie oceniasz Jestem ostatnia osobą, która czeka na gotowca. Nie mogę przygotować demo, ponieważ musiałbym wykonać dokładną kopię strony, nad która właśnie pracuję. Bardzo możliwe, że problemem stanowi jakiś inny skrypt lub css. Z drugiej strony mogłem coś przegapić podczas podpinania biblioteki i to właśnie sprawdzę za kilka godzin.

[d3ut3r]

Nie ma co się sprzeczać, temat był ciekawy, więc chciało mi się zrobić coś jeżeli byłoby to kolejne pytanie o temat przerabiany x razy na forum nie odpuściłbym i też prosiłbym o zamieszczenie kodu. Ja przy tej okazji wzbogaciłem się o nową bibliotekę (o której wcześniej nie słyszałem) a jeżeli przy okazji to komuś pomoże to tym lepiej.

[batman]

Problem rozwiązany. Okazało się, że nie dodałem do taga area atrybutu href. Bez niego nie wyświetla się zaznaczenie obszaru. W życiu bym na to nie wpadł. Dzięki za pomoc.