如何使用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標記圖像中的不同部分

回答

相關問題