jQuery/JS：有没有一种方法可以让一个 <map> 标签用于多个图像？答案

【问题标题】：jQuery/JS: Is there a way to have only one <map> tag that will serve for multiple images?jQuery/JS：有没有一种方法可以让一个 <map> 标签用于多个图像？
【发布时间】：2012-11-08 18:14:50
【问题描述】：

我有几张图片

<img usemap="#slideMap_branches"  src="branches.png" width="890" height="270" alt="Slide 4">
<img usemap="#slideMap_order" src="order.png" width="890" height="270" alt="Slide 2">
<img usemap="#slideMap_contact"  src="contact.png" width="890" height="270" alt="Slide 6">

我也有几个<map> 标签

<map name="slideMap_branches">
<area shape="poly" coords="500,233,378,231,378,278,-3,279,1,0,906,-1,905,281,499,277" href="javascript:alert('# branches');" target="_self" alt="slideMapPoly" />
</map>
<map name="slideMap_order">
    <area shape="poly" coords="500,233,378,231,378,278,-3,279,1,0,906,-1,905,281,499,277" href="javascript:alert('# order');" target="_self" alt="slideMapPoly" />
</map>
<map name="slideMap_contact">
    <area shape="poly" coords="500,233,378,231,378,278,-3,279,1,0,906,-1,905,281,499,277" href="javascript:alert('# contact');" target="_self" alt="slideMapPoly" />
</map>

基本上所有的地图区域都有相同的坐标，只是HREF属性不同，指向不同的链接，不是同一个。

我想知道是否有一种 javascript/jquery 方式只有一个 <map> 和 <area> 标记，当用户点击图片时，浏览器会识别出点击了哪张图片以及做什么。

我尝试了几种方法，但始终无法获取图像 ID/名称/src。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

所以您想在 3 张不同的图片上拥有相同的可点击区域，并让每张图片链接到不同的内容？

看看我在下面做了什么。它完成了工作。也许有更好的方法？请注意，图像有一个点击事件，当点击地图区域时，会设置一个标志来识别点击了图像的正确部分。在我有 alert("clicked on " + T.src) 的地方，您将根据单击的图像（基于 src 或自定义属性）来决定要做什么。

<html>
    <body>
        <script type="text/javascript">
            var linkout = false;

            function LinkOut() {
                linkout = true;
            }

            function imgClick(T) {
                if (linkout) {
                    alert("clicked on " + T.src);

                }
                linkout = false;
            }
        </script>

        <map name="slideMap">
            <area shape="poly" coords="500,233,378,231,378,278,-3,279,1,0,906,-1,905,281,499,277" href="javascript:LinkOut();" target="_self" alt="slideMapPoly" />
        </map>
        <img usemap="#slideMap"  src="branches.png" width="890" height="270" alt="Slide 4" onclick="imgClick(this);">
        <img usemap="#slideMap" src="order.png" width="890" height="270" alt="Slide 2" onclick="imgClick(this);">
        <img usemap="#slideMap"  src="contact.png" width="890" height="270" alt="Slide 6" onclick="imgClick(this);">
    </body>
</html>

【讨论】：

哦，我完全按照你的逻辑，这很好，但是我永远无法在上启动 onclick="" ...如果我删除 usemap="#slideMap" 然后 onclick=""有效，否则无效..也许我还有其他问题，我会继续努力，看看我是否能找到解决办法。谢谢！
好的，我正在使用 IE9 尝试此操作，并且在和上都会触发 click 事件。在 chrome 中，我看到只有一个事件正在触发。
我也在使用 IE9，找不到解决方法，但我看到了一个逻辑，但无法让它在我的机器上运行，但谢谢。我仍然接受你的回答。