それなりブログ

とあるWebエンジニアのそれなりのブログ、JavaScript/Node.js/Python/PHP/ゲーム作成 など

javascriptでuseMapを指定する際は、mapのname属性ではなくid属性を指定する

WinXP-IE6のバグだと思われるものです。
クリッカブルマップの設定で、img要素とmap要素を紐付ける場合
通常は以下のように書きます。

<map name="map_name"/>
<area shape="poly" coords="xx,xx,xx,xx,xx,xx,xx,xx" />
<map/>
<img src="hoge.gif" usemap="#map_name"/>

img要素が、使用map要素のname属性をキーにして紐つけています。

これをjavascriptにすると

var m = document.createElement("map");
m.name = "map_name";
document.body.appendChild(m);
var a = document.createElement("area");
a.shape = "poly";
a.coords = "xx,xx,xx,xx,xx,xx,xx,xx";
m.appendChild(a);
var i = document.createElement("img");
i.src = "hoge.gif";
i.isMap = true;
i.useMap = "#map_name";
document.body.appendChild(i);

こうなるはずであり、実際、WinXP-FireFox2では期待通りに動きます

・・・が、WinXP-IE6の場合は、map要素のname属性ではなく、id属性を参照するようです。
つまり、上記例であれば

m.id = "map_name";

を指定する必要があります。

ちなみに、javascriptで生成したDOMではなく、HTMLによるものであれば、name属性を参照しています。

45分掛かった
参考リンク



コメントを残す

メールアドレスが公開されることはありません。

Categories

Archives