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 属性が異なるだけです。

<map>タグを1つだけ持つjavascript/jqueryの方法が<area>あり、ユーザーが画像ブラウザをクリックすると、どの画像がクリックされ、何をすべきかが認識されるのではないかと思います。

いくつかの方法を試しましたが、イメージ ID/名前/ソースを取得できませんでした。

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 に答える