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

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 中的一个区域形状。

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