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

我正在构建一个交互式教育小应用程序，帮助孩子发现身体的不同部位。如何使用CSS3/JS标记图像中的不同部分

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

从技术上讲，我想知道我怎么能在图像中选择一些配件，让用户点击一个图像的一部分并链接到一个新的更具体的形象。

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

我怎样才能得到积分，所以我可以悬停用鼠标识别部分..

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

链接，我用实验： http://jsfiddle.net/ozgsvc61/1/

来源

2014-10-02 user3378649

我会使用位于上方的图像的正确地区的一些不可见元素。 – J148 2014-10-02 16:30:32

是的，但我该如何放置？我应该使用边距/填充来操纵它们。 – user3378649 2014-10-02 16:31:32

如果将图像和“锚点”包裹在一个div中，然后绝对放置“锚点”，它可能会最容易 – J148 2014-10-02 16:32:44

你可以用一个“Image Map实现这一目标”。这是HTML长久以来被遗忘的特性。要在图像中创建可链接区域，请使用<map/>元素以及<area/> elements。

<area/>像名字暗示的那样，定义图片中可点击区域的元素，并且可以给它们一个'多边形'形状，这听起来像是你要找的东西。

一个简单的例子：

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

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

来源

2014-10-02 16:36:04 Tudmotu

哇，考古学+1 :) – J148 2014-10-02 16:37:28

您可以添加元素，你的图像和放置它们绝对是这样的：

#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 
});

来源

2014-10-02 16:37:18 Matthias

然而，这只支持矩形区域。 – 2014-10-02 16:37:53

...和椭圆区域（边界半径） – J148 2014-10-02 16:38:32

我将此添加到我的回答上面:) – Matthias 2014-10-02 16:43:31

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

回答

相关问题