用 div 制作可点击的图像部分？答案

【问题标题】：make linkable image portion with a div?用 div 制作可点击的图像部分？
【发布时间】：2013-12-26 12:35:57
【问题描述】：

如何像这里一样链接图像的一小部分：

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

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

【问题讨论】：

代码显示为...？你试过什么？
@user2834426 检查下面的答案，如果有帮助请接受

标签： html image hyperlink

【解决方案1】：

使用地图区域概念。

拍摄三张图像。 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 时，图像会变为悬停图像，而在mouseout 上，它会变为原始图像。

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

How to get the image co-ordinates?.

或refer this below stackoverflow question

【讨论】：

【解决方案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>

【讨论】：

【解决方案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

【讨论】：