鼠标放在show div上的图像地图 [英] Image map on mouse over show div
问题描述
因此,我尝试在一张图片上创建多个图像映射,然后基于您将鼠标悬停在其上的图像,将从该图片下方的div中提取特定信息,并将其填充到该悬停的图像旁边. /p>
So I am trying to create multiple image maps on a picture and then based on the image you are hovering over it will pull that specific information from a div that is below the picture and populate it next to the hovered over image.
<div class="runner_div">
<img src="http://cooleycollective.com/test/slrc/wp-content/uploads/2013/01/Em_full.jpg" width="680" height="705" usemap="#runner_wear" /></a></p>
<map name="runner_wear">
<area shape="poly" coords="264,18,237,33,243,72,276,83,328,79,311,29," href="#hat" alt="hat" />
<area shape="rect" coords="259,69,331,99" href="#" alt="glasses" />
</map>
</div>
<div class="gear" id=hat>
<h2>Type of hat</h2>
<p>I love this hat.I wore it when I was running from a bear in the zoo.</p>
</div>
<div class="gear" id="glasses">
<p>These glasses were hand picked by a Sherpa from Kentucy!</p>
</div>
我希望div保留在下面,以便不被隐藏,而且当我将鼠标悬停在它所引用的图像上时,还具有可悬停的功能.我不确定是否需要为此使用jQuery,甚至不确定如何创建该代码.
I want the divs to stay below, so as to not be hidden, but also to have the functionality to be hoverable when I hover over the image it references. I am not sure if I need to use jQuery for this or even how to create that code.
我感觉代码会做类似的事情:将此imgmap的onmouse悬停,然后显示此imagemap引用的div.我不知道这在代码语言中会是什么样子.感谢您的帮助.
I feel like the code would do something like: onmouse hover of this imgmap then display the div that this imagemap references. I have no idea what this would look like in code language. Thanks for the help.
推荐答案
我假设您想要弹出效果.
I assume you want the popup effet.
这是有效的jQuery
Here's the working jQuery
var $popup = $('.popup');
$('area').on({
mouseover : function(e){
var $this = $(this),
$obj = $('#'+$this.prop('alt'));
$popup.text($obj.text()).css({
top: e.pageY + 25,
left: e.pageX - ($popup.width()/2),
}).show();
},
mouseout: function(){
var $this = $(this),
$obj = $('#'+$this.prop('alt'));
$popup.hide(0).empty();
}
});
这篇关于鼠标放在show div上的图像地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!