网站mouseover与imageMapResizer交互失效，<br>标签问题求助

问题根源分析 #

从页面元素检查来看，<map>标签内部被自动插入了<br>标签，这是WordPress的wpautop函数自动将换行转换为<br>导致的，直接破坏了<area>元素的结构，使得imageMapResizer无法识别正确热区，同时jQuery事件绑定也失效。

分步修复方案 #

1. 移除<map>内的自动换行<br>标签 #

WordPress会自动将HTML中的换行转换为<br>，可通过以下两种方式解决：

方法一：紧凑写法（推荐，不影响其他页面）

将<map>代码写成无换行的紧凑格式，避免WordPress自动添加<br>：

<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>

方法二：临时禁用当前页面的wpautop

在页面模板开头添加以下代码，仅对当前页面禁用自动换行：

<?php remove_filter('the_content', 'wpautop'); ?>

注意：若页面还有其他需要换行的内容，优先使用方法一。

2. 确保图片与<map>正确绑定 #

检查页面中的地图图片，必须添加usemap="#legenda"属性，示例：

<img src="你的地图图片路径" usemap="#legenda" id="base" alt="地图" />

这是地图热区生效的核心前提，无此属性则<map>与图片完全无关。

3. 修正jQuery事件绑定时机 #

当前jQuery代码可能在DOM元素未完全加载时执行，导致无法找到#legenda area元素。需将代码包裹在$(document).ready()中：

<script type="text/javascript">
$(document).ready(function() {
    imageMapResize();
    $('#legenda area').each(function () {
        $(this).mouseover(function (e) {
            var id = "#" + $(this).attr('alt');
            $(id).show();
            $("#base").hide();
        });

        $(this).mouseout(function (e) {
            var id = "#" + $(this).attr('alt');
            $(id).hide();
            $("#base").show();
        });
    });
});
</script>

4. 验证imageMapResizer文件路径 #

确认/imageMapResizer.min.js文件存在于网站根目录，若路径错误，修改为正确的相对/绝对路径，比如文件放在主题目录时：

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/imageMapResizer.min.js"></script>

验证步骤 #

1. 修改代码后刷新页面，用浏览器元素检查确认<map>内无<br>标签
2. 鼠标悬停地图热区，检查对应元素是否正常显示/隐藏
3. 打开浏览器控制台（F12），查看是否有报错信息，根据报错进一步排查

内容的提问来源于stack exchange，提问作者Felipe2004