0

所以我试图在一张图片上创建多个图像映射，然后根据你悬停在它上面的图像，它将从图片下方的 div 中提取特定信息，并将其填充到悬停的图像旁边。

<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，甚至不确定如何创建该代码。

我觉得代码会做类似的事情：这个imgmap的鼠标悬停然后显示这个imagemap引用的div。我不知道这在代码语言中会是什么样子。谢谢您的帮助。

4

1 回答 1

3

我假设你想要弹出效果。

请查看我使用您的标记为您准备的演示

这是工作的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();
  }
});
于 2013-01-13T00:49:25.870 回答