1

可以说我的图像很窄

200px 宽和 900px 高

如何在图像的某个部分悬停时让 div 出现在它旁边？

4

5 回答 5

4

使用地图元素来定义图像的区域，您可以使用不同的形状，如矩形、圆形和多边形，因此基本上您可以映射任何复杂的区域。

例如，在下面的示例中，我映射图像的左右部分

HTML：

<html><body>
<img src="https://www.google.com/images/srpr/logo3w.png" usemap="gmap"/>

<map name="gmap">
  <area id="left" shape="rect" coords="0,0,135,95"  />
  <area id="right" shape="rect" coords="135,0,275,95"  />
</map>

</body></html>​

JavaScript（使用 jQuery）：

$('#left').hover(function(){
    alert("left")
})

$('#right').hover(function(){
    alert("right")
})

在行动中看到它http://jsfiddle.net/anuraguniyal/GtMXk/3/

​</p>

于 2012-04-19T15:55:28.213 回答
1

position:absolute使用and/or将 div 放在您的图像上，z-index:100并在其上绑定.hover()事件。

于 2012-04-19T15:53:43.083 回答
1

获取鼠标位置，获取图像位置，计算差异以计算出您在图像的哪个部分。

于 2012-04-19T15:54:13.160 回答
1

您可以使用 CSS 定位图像，然后使用 jquery .hover() 和 .fade() 或 .show() / .hide()

于 2012-04-19T15:59:04.733 回答
0

你应该看看这个插件：

http://plugins.jquery.com/project/maphilight

和演示：

http://davidlynch.org/js/maphilight/docs/demo_usa.html

您也许可以使用其中的一些代码。

于 2012-04-19T16:04:15.917 回答