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

Question

我正在构建一个交互式教育小应用程序，帮助孩子们发现身体的不同部位。

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

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

示例：我将人体作为背景，我想点击一只眼睛，它会弹出并说它是一只眼睛。

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

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 事件。

Answer 2

您可以向图像添加元素并将它们绝对定位，如下所示：

#eye {
    position: absolute;
    height: 10px;  // size of area
    width: 10px;
    top: 20px;    // position
    left: 20px;
    cursor: pointer; // make it "feel" clickable

    // maybe you want to make a circle instead of a rectangle, you can do this with
    // border-radius (thanks to J148)
    border-radius: 10px;
}

现在你可以使用 JS 来获得点击并显示任何你想要的东西，在 JQuery 中例如：

$('#eye').click(function(){ 
    // this is an eye !!!
});

使用数据属性可能更容易获取内容。

<div class="area" data-content="This is an eye"></div>

在 JQuery 中：

$('.area').click(function(){
    content = $(this).data("content");
    // show content in any way
});