如何在onclick和onmouseover上更改不规则多边形形状的图像

Question

我需要在Adobe Illustrator中创建一个设计为不规则形状的菜单，我已经尝试过：

  <div class="body_container">
            <img src="img/sitio_Web.png" alt="" usemap="#sitio_Web_Map" height="787" border="0" width="1430">
            <map name="sitio_Web_Map">
                <area shape="poly" alt="" coords="377,164, 377,135, 305,135, 244,138, 194,145, 194,175, 247,168, 309,165, 377,164" href="#Quienes_Somos">
            </map> 
        </div>

但我不知道如何将其设置为具有鼠标悬停和鼠标单击效果的菜单

示例： http ： //i.stack.imgur.com/bYmMl.gif

Answer 1

如果要添加鼠标悬停并单击到各个部分，则需要使每个部分成为地图中的区域形状。

<map name="sitio_Web_Map">
  <area shape="poly" coords="/*first coords*/" href="#Quienes_Somos1">
  <area shape="poly" coords="/*second coords*/" href="#Quienes_Somos2">
  <area shape="poly" coords="/*third coords*/" href="#Quienes_Somos3">
</map>

然后，您可以为其中的任何一个添加一个类，以实现诸如鼠标悬停之类的操作，并像对待其他任何HTML元素一样对待它们。