Как сделать интерактивную картинку-ссылку

D
На сайте с 28.08.2016
Offline
4
812

Возникла идея для сайта сделать картинку ссылку (типо меню).

Допустим это круговая диаграмма. Во вложении пример.

Принцип работы: Открывается страничка, на ней расположена диаграмма.

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

При клике на закрашенный круг, осуществляется переход по ссылке (либо красной, либо зеленой, либо синей)

Подскажите любую инфу.

jpg graph.jpg
K0
На сайте с 01.09.2016
Offline
66
#1

Если не заморачиваться закрашиванием круга:

http://htmlbook.ru/html/map

D
На сайте с 21.03.2016
Offline
10
#2

удобный сервис для генерации карты http://maschek.hu/imagemap/imgmap/

Загружаете картинку-> выделяете нужную зону-> получаете сгенерированный код.

потом просто для определенной зоны задаёте hover эффект(например что бы весь круг стал красным)

D
На сайте с 28.08.2016
Offline
4
#3

Спасибо, если у кого еще есть идеи пишите) плюсану карму)

tommy-gung
На сайте с 22.11.2006
Offline
287
#4

с svg возможно все :)

Здесь не могла быть ваша реклама
D
На сайте с 28.08.2016
Offline
4
#5
tommy-gung:
с svg возможно все :)

я немножко нуб, свг знаю что это. Это типо инструмент рисования в хтмл5. Но мне нужно что бы были картинки. Круг то я образно нарисовал. Мне нужно что бы каждая секция круга была полноценной картинкой, которая видна только от части. При ховере картинка заполняет весь круг.

tommy-gung
На сайте с 22.11.2006
Offline
287
#6

Dmitriyspbs, svg - это и есть картинка. векторная

нарисуйте круговую диаграмму (такое изображение называется круговой диаграммой) и к ней добавьте стили для :hover

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий