[JavaScript][CSS][inne] Okrągłe menu Opcje

[dareksbs]

Witam,

Chciałbym stworzyć takie menu, gdzie zakładki będą dookoła obrazka, po najechaniu na jedną będzie się zmieniał kolor, coś ala menu tutaj :



I teraz pytanie jaki jest najłatwiejszy sposób na takie menu, trochę poszperałem w internecie i znalazłem "map hilight", które działa pod jQuery, co o tym myślicie jedyny problem, który tu napotkałem to pozycje inaczej zwane "coords" nie wiem jak znaleźć pozycję na swoim obrazku i jak go wyznaczyć

Tu małe demo skryptu :
http://davidlynch.org/projects/maphilight/docs/demo_usa.html


Macie może jeszcze jakiś propozycje czy w CSS3 jest coś takiego możliwe

Pozdrawiam

[lobopol]

http://www.maschek.hu/imagemap/ wyklikaj sobie koordynaty

[PrinceOfPersia]

Macie może jeszcze jakiś propozycje czy w CSS3 jest coś takiego możliwe

pewnie tak
kółko = kwadratowy div z border-radius:50%
napisy = transform:rotate
itp.
http://jsfiddle.net/CALBc/
tylko nie wiem jak fajnie zakręcić te napisy (samo rotate je obraca, ale nie zwija, nie zakręca ich, więc jak masz długi napis to zaczyna on wychodzić poza obręcz).

BTW to ten sam David Lynch, reżyser Zagubionej Autostrady, czy ktoś o takim samym nazwisku?

Ten post edytował PrinceOfPersia 6.05.2013, 14:09:31

[Mega_88]

Kolejny sposób:

Darmowy program graficzny GIMP ma opcję rysowania map bitowych. Ładujesz obrazek i bez problemu w nim oznaczysz punkty na obrazku, które chcesz żeby były klikalne + ewentualnie jakieś inne bajery.

Czyli wyznaczysz sobie współrzędne każdego punktu jak tutaj: http://davidlynch.org/projects/maphilight/docs/demo_usa.html

Ten post edytował Mega_88 6.05.2013, 14:12:09

[!*!]

tylko nie wiem jak fajnie zakręcić te napisy (samo rotate je obraca, ale nie zwija, nie zakręca ich, więc jak masz długi napis to zaczyna on wychodzić poza obręcz).

http://csswarp.eleqtriq.com/
Niestety trzeba to dzielić ręcznie lub z automatu w JS.

Taki efekt można też uzyskać w canvas, jednak tu już to się kłóci z tym czy to ma sens, skoro to nawigacja.