I am experiencing an issue with a map on my website that contains four colored squares. When I hover over one of the squares, the image of the map changes to show the route corresponding to that color. However, this causes the image to shift position and interfere with the "hitbox" of the other squares, making it difficult to interact with them effectively.
This is the link to the page: link
<?php get_header(); ?>
<div class="gdlr-content">
<!-- Above Sidebar Section-->
<?php global $gdlr_post_option, $above_sidebar_content, $with_sidebar_content, $below_sidebar_content; ?>
<?php if(!empty($above_sidebar_content)){ ?>
<div class="above-sidebar-wrapper"><?php gdlr_print_page_builder($above_sidebar_content); ?></div>
<?php } ?>
<!-- Sidebar With Content Section-->
<?php
if( !empty($gdlr_post_option['sidebar']) && ($gdlr_post_option['sidebar'] != 'no-sidebar' )){
global $gdlr_sidebar;
$gdlr_sidebar = array(
'type'=>$gdlr_post_option['sidebar'],
'left-sidebar'=>$gdlr_post_option['left-sidebar'],
'right-sidebar'=>$gdlr_post_option['right-sidebar']
);
$gdlr_sidebar = gdlr_get_sidebar_class($gdlr_sidebar);
?>
<div class="with-sidebar-wrapper">
<div class="with-sidebar-container container">
<div class="with-sidebar-left <?php echo esc_attr($gdlr_sidebar['outer']); ?> columns">
<div class="with-sidebar-content <?php echo esc_attr($gdlr_sidebar['center']); ?> columns">
<?php
if( !empty($with_sidebar_content) ){
gdlr_print_page_builder($with_sidebar_content, false);
}
if( !empty($gdlr_post_option['show-content']) && $gdlr_post_option['show-content'] != 'disable' ){
get_template_part('single/content', 'page');
}
?>
</div>
<?php get_sidebar('left'); ?>
<div class="clear"></div>
</div>
<?php get_sidebar('right'); ?>
<div class="clear"></div>
</div>
</div>
<?php
}else{
if( !empty($with_sidebar_content) ){
echo '<div class="with-sidebar-wrapper">';
gdlr_print_page_builder($with_sidebar_content);
echo '</div>';
}
if( empty($gdlr_post_option['show-content']) || $gdlr_post_option['show-content'] != 'disable' ){
get_template_part('single/content', 'page');
}
}
?>
<!-- Below Sidebar Section-->
<?php if(!empty($below_sidebar_content)){ ?>
<div class="below-sidebar-wrapper"><?php gdlr_print_page_builder($below_sidebar_content); ?></div>
<?php } ?>
</div><!-- gdlr-content -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Início do código para o hover no mapa - colocar no final do arquivo html -->
<map name="legenda" id="legenda">
<area alt="bh" title="" href="#" shape="rect" coords="744,728,977,748" />
<area alt="mariana" title="" href="#" shape="rect" coords="745,767,922,785" />
<area alt="ob" title="" href="#" shape="rect" coords="745,803,959,820" />
<area alt="transfer" title="" href="#" shape="rect" coords="745,839,1087,860" />
</map>
<script type="text/javascript" src="/imageMapResizer.min.js"></script>
<script type="text/javascript">
imageMapResize();
$('#legenda area').each(function () {
// Assigning an action to the mouseover event
$(this).mouseover(function (e) {
var id = "#" + $(this).attr('alt');
$(id).show();
$("#base").hide();
});
// Assigning an action to the mouseout event
$(this).mouseout(function (e) {
var id = "#" + $(this).attr('alt');
$(id).hide();
$("#base").show();
});
});
</script>
<?php get_footer(); ?>
It was supposed to work fine :(