如何在单击和鼠标悬停时更改不规则多边形形状图像

Question

我需要在 Adob​​e 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 元素一样对待它们。