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

时间:2015-08-05 15:47:59

标签: javascript jquery css html5 adobe-illustrator

我需要在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

1 个答案:

答案 0 :(得分:0)

如果要添加鼠标悬停并单击各个部分,则需要将每个部分设置为地图中的区域形状。

<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元素一样对待它们。