Question

当用户将鼠标悬停在图像地图的热点上时，以下代码可以完美地显示图像。唯一的问题？点击“this.href”当然会将用户带到热点图像本身。我想保留'href'将用户发送到我选择的页面。

是否可以使用“title”而不是“href”来定义热点图像？如果是这样，请显示详细信息，我是javascript的新手，谢谢！

<script type="text/javascript">
 function ShowPicC(sImage){document.housec.src = sImage}
 </script>

 <img border="0" src="main-image.png" width="640" height='640' usemap="#FPMap0">
 <map name="FPMap0">
 <area onmouseover='ShowPicC(this.href)' href='hotspot1.png' alt="thisalt" title="can-png-go-here.png" shape="circle"  coords="400,400,20">
 <area onmouseover="ShowPicC(this.href)" href="hotspot2.jpg" alt="youralt" title="can-png-go-here2.png" shape="circle" coords="420,420,20">
 <area onmouseover="ShowPicC(this.href)" href="hotspot3.jpg" alt="differentalt" title="can-png-go-here3.png" shape="circle" coords="440,440,20">
 <area onmouseover="ShowPicC(this.href)" href="hotspot4.jpg" alt="whateveralt" title="can-png-go-here4.png" shape="circle" coords="460,460,20">
 </map>

 <img name="housec" src="starter-hotspot-image.png" width="192" height="170">

Answer 1

当然，虽然title不是area的有效属性。你试过吗？

<area onmouseover="ShowPicC(this.title)" title="someotherimage.jpg" ...

您最好使用数据属性：

<area data-image="someotherimage.jpg" ...

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

用this.title替换this.href

1 个答案: