As I navigate through a WordPress website, I am attempting to create a mandala using dynamic images.
Utilizing jQuery and CSS areas, I aim to display the corresponding image when hovering over a specific section. However, I am facing an issue where there is a delay of about 1 second before the image appears upon mouseover, and switching between sections does not function correctly.
I suspect that the problem lies in the new image overlapping the area designated for mouseover.
Below is the HTML code:
<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">
</map>
Javascript code snippet:
<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, #image2, #image3, #image4, #image5, #image6, #image7, #image8').css('display', 'none');
$('#' + image).css('display', 'block');
});
});
</script>
The mandala's design can be visualized below:
A preview of the image displayed upon mouseover:
Appreciate any insight or assistance on this matter. Thank you!