javascript - 如何使用 CSS3/JS 标记图像中的不同部分

Question

我正在构建一个交互式教育小应用程序，我可以在其中帮助 children 发现 body 的不同部位。

http://www.easypacelearning.com/images/TheWholeBody.jpg

从技术上讲，我想知道如何选择图像中的某些部分，让用户点击图像的一部分并链接到新的更具体的图像。

例子:我把人的 body 作为背景，我想点击一只眼睛，它会弹出并说这是一只眼睛。

我怎样才能获得积分，以便我可以使用鼠标悬停来识别零件..

function getData() {
        return {
          'Head': {
            color:  ...
            points: ..
          }, 
'body': {
            color:  ...
            points: ..
          },
'leg': {
            color:  ...
            points: ..
          }
}
}

我用来做实验的链接: http://jsfiddle.net/ozgsvc61/1/

Answer 1

您可以使用“Image Map”来实现。这是 HTML 一个早已被遗忘的特性。 要在图像中创建可链接区域，您可以使用 <map/>元素连同 <area/> elements .

<area/>元素，顾名思义，定义图像中的可点击区域，您可以为它们赋予“多边形”形状，这听起来就像您正在寻找的那样。

一个简单的例子:

<map name="body-parts">
   <area shape="poly" coords="..." href="#eyes" />
</map>

编辑:
我不认为你可以听click事件，但你绝对可以使用 hashchange 事件。