make a div appear next to it on hover of a certain section of the image
Question
Lets say i have a narrow image
200px wide and 900px tall
How can I make a div appear next to it on hover of a certain section of the image?
5 answers
solution1
4 ACCPTED 2012-04-19 15:55:28
Use the map element to define areas of your image, you can use different shapes like rect, circle and poly, so basically you can map any complex area.
eg in example below I map left and right portion of an image
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(using jQuery):
$('#left').hover(function(){
alert("left")
})
$('#right').hover(function(){
alert("right")
})
See it in action http://jsfiddle.net/anuraguniyal/GtMXk/3/
solution2
1 2012-04-19 15:53:43
在您的图片上放置一个div，其position:absolute和/或z-index:100 ，并在其上绑定.hover()事件。
solution3
1 2012-04-19 15:54:13
获取鼠标的位置，获取图像的位置，计算差值以算出您在图像的哪一部分。
solution4
1 2012-04-19 15:59:04
您可以使用CSS定位图像，然后使用jquery .hover（）和.fade（）或.show（）/ .hide（）
solution5
0 2012-04-19 16:04:15
You should check out this plugin:
http://plugins.jquery.com/project/maphilight
and the demo:
http://davidlynch.org/js/maphilight/docs/demo_usa.html
You might be able to use some code from it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.