用div創建可鏈接的圖像部分？

Question

怎麼可能像這裏鏈接一小部分圖像：

http://www.ceciliabotta.com/index.html？

檢查元素我看到有一些座標表示。這是做到這一點的方式嗎？我試圖在背景圖片上創建一個div，但它似乎並不工作，所以我陷入了困境。

Answer 1

使用地圖區域概念。

拍攝三張圖片。 1）原始圖像 2）懸停輸入的圖像（即，在黑色字母與僅輸入完整的整個圖像中懸停狀態IE）
3）懸停視頻 4的圖像）懸停壓機的圖像

<img id="originalimage" src="originalimage.png" width="140" height="140" border="0" usemap="#Map" /> 

<map name="Map" id="Map"> 
    <area shape="rect" coords="77,18,123,81" href="#" onmouseover="onHover('inputhoverimagesrc.png')" onmouseout="onout6('originalimagesrc.png')" /> 
    <area shape="rect" coords="77,18,127,90" href="#" onmouseover="onHover('videohoverimagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/> 
    <area shape="rect" coords="77,18,125,100" href="#" onmouseover="onHover('presshoverimagesrc.png')" onmouseout="onout6('originalimagesrc.png')"/> 
</map> 


<script> 


function onHover6(image1) 
{ 
document.getElementById('originalimage').src=image1; 
} 
function onout6(image2) 
{ 
document.getElementById('originalimage').src=image2; 
} 
</script> 

在這裏，當你座標爲hover時，圖像變爲hoverimages，並在mouseout上更改爲原始圖像。

您可以參考以下鏈接瞭解如何獲取該地區的座標。

How to get the image co-ordinates?.

或refer this below stackoverflow question

Answer 2

使用地圖區

<img src="name.png" width="140" height="140" border="0" usemap="#Map" /> 

<map name="Map" id="Map"> 
    <area shape="rect" coords="77,18,123,81" href="#" /> 
</map> 

Answer 3

此示例顯示了可點擊圖片....

<div>click on the center of the image: 
<br /> 
<br /> 
<img src="http://radiantq.com/wp-content/uploads/2011/11/software_box.png" width="500px" height="500px" usemap="#map1" alt="imagemap" /> 
<map id="map1" name="map1"> 
    <area shape="rect" coords="0 140 200 200" onclick="alert('you clicked me!')" alt="drag" /> 
    <area shape="rect" coords="11 319 200 200" onclick="alert('you clicked me!')" alt="drag" /> 
</map> 
</div> 

的演示：JSFIDDLE