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上的图像会更改为原始图像。

您可以参考以下链接，了解如何获得该地区的坐标。

How to get the image co-ordinates?.

或refer this below stackoverflow question

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>

for demo：JSFIDDLE

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

3 个答案: