Создание ссылок на круговой диаграмме Изображение

Question

У меня есть изображение круговой диаграммы с 5 равными частями, я хотел бы создать опрокидывание для каждого раздела, которое затем создало всплывающую всплывающую подсказку, которая будет содержать текст, а также каждый раздел ссылку на другую страницу.

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

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

Спасибо, за помощь.

Answer 1

Я бы использовал карту изображений. вы можете узнать о них подробнее здесь: http://www.w3schools.com/tags/tag_map.asp

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

Готовый код будет выглядеть следующим образом:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 

<map name="planetmap"> 
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> 
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> 
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> 
</map>