2

私がする必要があるのは、エリア タグが追加されたときにマップに動的に書き込み、クリックすると関数がトリガーされるようにすることです。

    <img src="out.jpg" usemap="#mapmap"/>
    <map name="mapmap">
        <area id="1" shape="rect" coords="75,300,125,400" onclick="writeDiv(this.id)"/>
        <area id="2" shape="rect" coords="175,300,225,400" onclick="writeDiv(this.id)"/>
        <area id="3" shape="rect" coords="275,300,325,400" onclick="writeDiv(this.id)"/>
    </map>

エリアがどこになるかを知っていれば、それはまさに私が必要とすることです。ただし、ユーザーがさらに追加すると、それらを動的にロードする必要があり、すでにこれを試しました（スクリプトタグで）：

    $("<img src=\"out.jpg\" usemap=\"#mapmap\"\/>").appendTo('body');
        $("<map name=\"mapmap\">").appendTo('body');
            $("<area id=\"1\" shape=\"rect\" coords=\"75,300,125,400\" onclick=\"writeDiv(this.id)\"\/>").appendTo('body');
            $("<area id=\"2\" shape=\"rect\" coords=\"175,300,225,400\" onclick=\"writeDiv(this.id)\"\/>").appendTo('body');
            $("<area id=\"3\" shape=\"rect\" coords=\"275,300,325,400\" onclick=\"writeDiv(this.id)\"\/>").appendTo('body');
        $("<\/map>").appendTo('body');

期待どおりに機能しないことを除いて、画像の周りのページの残りの部分をフォーマットできるので、これで問題ありません。私はすでにテストしました

    $("<div id=\"test\">testing text<\/div>").appendTo('body');

これは、ページの本文の下部にテキストを書き込むように機能します。

それで、これを機能させる方法はありますか、それとも と の間の依存関係は常にそれを台無しにしますか? それを行うための完全に別の方法を考えることができれば、私は提案を受け入れます. ありがとう！

4

1 に答える 1

0

を使用する$('<tag ...>')と、jQuery は HTML を解析し、HTML から DOM 要素を作成します。タグではなく、要素を追加しています。このように追加すると<map ...>、要素が作成されて<map>追加されます。これは、(追加後に結果の HTML をダンプすると)</map>タグとすべてを含むドキュメントに表示されます。

<area>要素が機能するためには (そして一般に、ドキュメントが有効な HTML のままであるためには)、要素は本体ではなく要素に入る必要が<map>あります。

var $map = $('<map name="mapmap">').appendTo('body');
$('<area id="1" shape="rect" coords="75,300,125,400" onclick="writeDiv(this.id)" />').appendTo($map);
$('<area id="2" shape="rect" coords="175,300,225,400" onclick="writeDiv(this.id)" />').appendTo($map);
$('<area id="3" shape="rect" coords="275,300,325,400" onclick="writeDiv(this.id)" />').appendTo($map);
// Note, no $('</map>') -- the $('<map...>') already took care of that
于 2013-05-27T18:31:47.687 に答える