图片映射（Image Map）链接逻辑反转及title悬停效果失效问题

1. 反转链接行为（仅映射区域可跳转） #

• 删掉包裹<img>和<map>的外层<a>标签——这个标签会让整张图片都能跳转，是当前反效果的根源。
• 给每个<area>标签补上有效的href属性，把值设为你要跳转的次级页面地址（比如link_to.html），这样只有映射区域会触发跳转。

2. 修复title悬停提示不生效的问题 #

• 把需要的提示文本填到<area>标签的title属性里，图片映射的悬停提示是由<area>的title控制的，之前你把这些属性留空了，自然没效果。
• 如果需要给非映射区域也加提示，可以保留<img>标签的title属性，映射区域的提示会优先显示。

修改后的完整代码 #

<img src="img.png" usemap="#map" alt="" title="非映射区域提示">
<map name="map" id="map">
    <area target="" alt="区域1提示" title="点击跳转到次级页面" href="link_to.html" coords="321,65,382,187,337,292,302,304,269,292,361,197,332,163,327,153,318,88,314,73,315,70,319,70" shape="poly">
    <area target="" alt="区域2提示" title="点击跳转到次级页面" href="link_to.html" coords="286,313,317,329,307,353,292,347,303,332" shape="poly">
</map>

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