html - 用 div 制作可链接的图像部分？

Question

如何链接图像的一小部分，如下所示：

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

检查元素我看到有一些坐标表示。这是这样做的方法吗？我试图在背景图像上创建一个 div，但它似乎根本不起作用，所以我被卡住了。

Answer 1

使用地图区域

<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 2

使用地图区域概念。

拍摄三张图像。1）原始图像 2）输入的悬停图像（即仅以黑色字母输入的完整图像，即处于悬停状态）
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其上变为原始图像。

您可以参考以下链接了解如何获取该区域的坐标。

如何获得图像坐标？

或参考下面的stackoverflow问题

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