Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS][inne] Okrągłe menu
Forum PHP.pl > Forum > Przedszkole
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 questionmark.gif 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 questionmark.gif czy w CSS3 jest coś takiego możliwe questionmark.gif

Pozdrawiam
lobopol
http://www.maschek.hu/imagemap/ wyklikaj sobie koordynaty
PrinceOfPersia
Cytat
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?
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
!*!
Cytat(PrinceOfPersia @ 6.05.2013, 15:06:05 ) *
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.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.