JQuery area mouseover issue

Question

Я нахожусь на веб-сайте worpress, и я стараюсь сделать мандалу с меняющимися изображениями.

Я использую jquery и область из css, когда мышь находится над разделом, разделенным областью, я показываю соответствующее изображение. Но есть проблема, когда я нажимаю мышь, требуется некоторое время (1 с) перед отображением изображения, и когда я нажимаю мышь на другую секцию, она не работает хорошо.

Я думаю, что проблема связана с тем, что новое выводимое изображение наезжает секции наведения мыши, ограниченной области

здесь 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 код:

<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

Snippet следующим образом ..

$("#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>

Опять же, это просто доказательство концепция. Пожалуйста, не говорите мне, что это не работает так, как вы хотите точно

Надеюсь, это поможет.