Jquery区域鼠标悬停问题

Question

我在一个worpress网站上，我尝试用改变图像制作曼荼罗。

我使用jquery和css中的区域，当鼠标位于由区域分隔的区域上时，我显示相应的图像。 但是有一个问题，当我把鼠标放在上面时，在显示图像之前需要一些时间（1s），当我把鼠标放在另一部分上时，它不能正常工作......

我认为问题是由于新显示的图像来自区域划分的鼠标悬停部分

这是html代码：

<div class="mandala">
    <img id="mandala_img" src="http://example.org/site/wp-content/uploads/2015/02/background.png" usemap="#mandala_map">
    <div id="image1"></div>
    <div id="image2"></div>
    <div id="image3"></div>
    <div id="image4"></div>
    <div id="image5"></div>
    <div id="image6"></div>
    <div id="image7"></div>
    <div id="image8"></div>
    <map name="mandala_map" id="mandala_map">
    <area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="http://example.org/site/" id="area_image1">
    <area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="http://example.org/site/" id="area_image2">
    <area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="http://example.org/site/" id="area_image3">
    <area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="http://example.org/site/" id="area_image4">
    <area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="http://example.org/site/" id="area_image5">
<!--    <area shape="poly" coords="124,462,192,393," href="http://example.org/site/" id="area_image2">
    <area shape="poly" coords="" href="http://example.org/site/" id="area_image2">
    <area shape="poly" coords="" href="http://example.org/site/" id="area_image2">-->
    </map>
</div>

js code：

<script type="text/javascript">
    $('.mandala area').each(function () {
    // Assigning an action to the mouseover event
    $(this).mouseover(function (e) {
        var image = $(this).attr('id').replace('area_', '');
        $('#image1').css('display', 'none');
        $('#image2').css('display', 'none');
        $('#image3').css('display', 'none');
        $('#image4').css('display', 'none');
        $('#image5').css('display', 'none');
        $('#image6').css('display', 'none');
        $('#image7').css('display', 'none');
        $('#image8').css('display', 'none');
        $('#' + image).css('display', 'block');
    });
});
</script>

曼陀罗看起来像这样：

鼠标上显示的图像如下所示：

谢谢你的帮助

Answer 1

根据我的建议，我做了一个基本的粗糙小提琴。它不是很顺利，但这只是为了给我的建议提供概念证明。

我正在做的就是根据图像地图的透明屏幕悬停哪个区域来更改背景图像

Fiddle link here

摘录如下..

    $("#area_image1").mouseover(function(e) {
      $('.mandala').css("background", "url('http://i.stack.imgur.com/xypLJ.png') no-repeat center");
    });
    $("#area_image1").mouseout(function(e) {
      $('.mandala').css("background", "url('http://i.stack.imgur.com/A690W.png')");
    });

.mandala {
  background-image: url("http://i.stack.imgur.com/A690W.png");
  display: inline-block;
}
#mandala_img {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mandala">
  <img id="mandala_img" src="http://dummyimage.com/600x541.png&text=sample" width="600" height="541" usemap="#mandala_map">
  <map name="mandala_map" id="mandala_map">
    <area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="#area_image1" id="area_image1" />
    <area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="#area_image2" id="area_image2" />
    <area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="#area_image3" id="area_image3">
    <area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="#area_image4" id="area_image4" />
    <area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="#area_image5" id="area_image5" />
  </map>
</div>

这只是一个概念验证。请不要告诉我这不会按照你想要的方式运作

希望这有帮助。