Круговое меню на CSS

[ola]

Направьте верным путем. Хочу попробовать сделать макет, внешне похожий на этот http://www.free-lance.ru/users/somnambula/...hp?prjid=474595

Только в окружности у меня находится одна картинка, которую хочу разбить по секторам (6 штук). Из каждого сектора выходит "стрелочка-указатель" с названием меню.

При нажатии на один из пунктов меню и на один из секторов (желательно чтобы он "загорался", например, становился ярче).

Думаю, есть вариант реализовать это с помощью CSS. Тогда надо картинку нарезать, а как не знаю, на прямоугольники понятно как...а на треугольники как? (вернее сектора).

Или с помощбю карт это можно сделать..?

[stars]

Направьте верным путем. Хочу попробовать сделать макет, внешне похожий на этот http://www.free-lance.ru/users/somnambula/...hp?prjid=474595

Только в окружности у меня находится одна картинка, которую хочу разбить по секторам (6 штук). Из каждого сектора выходит "стрелочка-указатель" с названием меню.

При нажатии на один из пунктов меню и на один из секторов (желательно чтобы он "загорался", например, становился ярче).

Думаю, есть вариант реализовать это с помощью CSS. Тогда надо картинку нарезать, а как не знаю, на прямоугольники понятно как...а на треугольники как? (вернее сектора).

Или с помощбю карт это можно сделать..?

самое интересно что в вашем примере сделано точ в точ как если бы на html использовали map так что пользуйтесь им...

[rus]

самое интересно что в вашем примере сделано точ в точ как если бы на html использовали map так что пользуйтесь им...

какой нафиг мап?

там реально сделать все на позиционировании+ховер на ссылку-изображение, но вот единственное что не получится, так это эффект плавной смены картинки при наведении, хотя... может на js и можно это сделать.

[ola]

какой нафиг мап?

там реально сделать все на позиционировании+ховер на ссылку-изображение, но вот единственное что не получится, так это эффект плавной смены картинки при наведении, хотя... может на js и можно это сделать.

А для того, чтобы спозиционировать , ведь нужно на резать на 6 кусочкков мою окружность. Как это можно сделать не подскажите? я с фотошопом весь день борюсь не получается. Не знаю как.

[Justnewone]

А для того, чтобы спозиционировать , ведь нужно на резать на 6 кусочкков мою окружность. Как это можно сделать не подскажите? я с фотошопом весь день борюсь не получается. Не знаю как.

ничего не нарежеца. толька прямоугольниками, можно взять каринку, круглую, и на ней нарезать потом мап.

Но пример Ваш - флешевый, может лучше во флеше?

[ola]

ничего не нарежеца. толька прямоугольниками, можно взять каринку, круглую, и на ней нарезать потом мап.

Но пример Ваш - флешевый, может лучше во флеше?

Flash, боюсь, не осилю(

Т.е. вы предлагаете использовать <map> , правильно?

А может нарезка возможна в каком-то дугом графич.редакторе? делают же это как-то!?

[Justnewone]

Flash, боюсь, не осилю(

Т.е. вы предлагаете использовать <map> , правильно?

А может нарезка возможна в каком-то дугом графич.редакторе? делают же это как-то!?

никак. Картинки только прямоугольные, Можно конечно намутить картинок с секторами, вокруг которых просто прозрачное обрамление, и потом склеивать - но это будет ахтунг.

Мап всяко правильней.

[rus]

Мап всяко правильней.

почему?

А разве нельзя нарезать эти картинки с прозрачным фоном?

[Justnewone]

почему?

А разве нельзя нарезать эти картинки с прозрачным фоном?

а как потом кликабельную область вида "сектор круга" сделать? К отму же 6 картинок с фоном будут никак не меньше по весу чем 1 большая. зато в 6 раз больше дергаем сервак. в 6 раз больше писать css под спрайты и т.д.

[Great Rash]

http://www.alistapart.com/d/sprites/ala-blobs2.html

И никаких мапов...

[Justnewone]

http://www.alistapart.com/d/sprites/ala-blobs2.html

И никаких мапов...

В исходнике круг, который состоит из равных четких секторов =) Они далеки от прямоугольника. Очень интересно посмотреть на разъедение кликабельных областей между секторами, разделенными сечением в 60 градусов от оси х, например. А-ля скругленные углы без картинок 3-4 года назад?

[ola]

http://www.alistapart.com/d/sprites/ala-blobs2.html

И никаких мапов...

здорово) но в фотошопе я свою окружность по всей видимости не порежу, попробую какой-нибудь другой редактор...

[Great Rash]

Ладно признаю, что тут без мапы не обойтись.

[ola]

Ладно признаю, что тут без мапы не обойтись.

[stars]

да можете вообще не резать, сколько там 6 секторов? делаем 6 картинок с выделенными секторами разбиваем мапами и дальше по наведению на разные мапы разные куски...

Насчет разрезать по диагонали это интересно но картинка как не крути будет 1 прямоугольная, так что если резать по диагонали то надо делать прозрачности...

Edited April 14, 2010 by stars

[sigma77]

stars

Как ты не вырезай сектора, какринки будут перехлестывать друг-друга, и практически совсем перекрывать друг друга.

Edited April 15, 2010 by sigma77

[mishka]

Та не ребят... если делать это через image map то все будет норм, только переход будет резким без эффектов. Но секции будут такими какими их сделать, не прямоугольными.