Как сделать круговое меню ?

[dreamfactor]

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

[Great Rash]

Кроссбраузерность?

[dreamfactor]

Кроссбраузерность?

ну в последних версиях, ИЕ можно не учитывать)

[afdw]

Сделайте карту (html элемент map) этой картинки в каком-нибудь редакторе.

[Great Rash]

ну в последних версиях, ИЕ можно не учитывать)

Тогда на SVG делается элементарно.

Можно кстати на JS сделать, чтобы вообще везде работало... Координаты центра знаем, координаты мыши знаем, по теореме Пифагора высчитываем угол гипотенузы и смотрим если он, к примеру, в пределах от 0 до 45 градусов, то показывает IMG_1. Остальные по такому же принципу.

[afdw]

Самый просто способ - с картами изображений. Там вообще ничего делать не надо.

[dreamfactor]

 

ну в последних версиях, ИЕ можно не учитывать)

Тогда на SVG делается элементарно.

Можно кстати на JS сделать, чтобы вообще везде работало... Координаты центра знаем, координаты мыши знаем, по теореме Пифагора высчитываем угол гипотенузы и смотрим если он, к примеру, в пределах от 0 до 45 градусов, то показывает IMG_1. Остальные по такому же принципу.

 

можно поподробнее о SVG ?

[afdw]

 

 

ну в последних версиях, ИЕ можно не учитывать)

Тогда на SVG делается элементарно.

Можно кстати на JS сделать, чтобы вообще везде работало... Координаты центра знаем, координаты мыши знаем, по теореме Пифагора высчитываем угол гипотенузы и смотрим если он, к примеру, в пределах от 0 до 45 градусов, то показывает IMG_1. Остальные по такому же принципу.

 

можно поподробнее о SVG ?

 

http://jsfiddle.net/omwpdm7o/

[dreamfactor]

 

 

 

ну в последних версиях, ИЕ можно не учитывать)

Тогда на SVG делается элементарно.

Можно кстати на JS сделать, чтобы вообще везде работало... Координаты центра знаем, координаты мыши знаем, по теореме Пифагора высчитываем угол гипотенузы и смотрим если он, к примеру, в пределах от 0 до 45 градусов, то показывает IMG_1. Остальные по такому же принципу.

 

можно поподробнее о SVG ?

 

http://jsfiddle.net/omwpdm7o/

 

но у меня должен быть именно hover с css потому что там появление с эффектами

[afdw]

но у меня должен быть именно hover с css потому что там появление с эффектами

 

На SVG возможно гораздо больше эффектов, чем на CSS. Но если всё же необходимо, то вот.

[DivMan]

У Зоракаса на подобии видео есть 

[dreamfactor]

 

но у меня должен быть именно hover с css потому что там появление с эффектами

 

На SVG возможно гораздо больше эффектов, чем на CSS. Но если всё же необходимо, то вот.

 

а можно там не текст а что-то вроде area сделать ?

[afdw]

 

 

но у меня должен быть именно hover с css потому что там появление с эффектами

 

На SVG возможно гораздо больше эффектов, чем на CSS. Но если всё же необходимо, то вот.

 

а можно там не текст а что-то вроде area сделать ?

 

Да. Называется path. Мощная штука кстати.

[Great Rash]

http://codepen.io/anon/pen/EjXybW