0

我有几张图片

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

4

1 回答 1

0

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

看看我在下面做了什么。它完成了工作。也许有更好的方法？注意图像有一个点击事件，当点击地图区域时，会设置一个标志来识别点击了图像的正确部分。在我有警报（“点击”+ 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>
于 2012-11-08T18:46:04.440 回答