javascriptでuseMapを指定する際は、mapのname属性ではなくid属性を指定する
2007年8月3日
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分掛かった
参考リンク
- HTMLクイックリファレンス(クリッカブルマップの説明)