Question

我有一个映射的图像，我有五个区域（五个对我来说很有趣的对象）。单击这五个区域后，我想更改图像，从而更改地图。这就像是一个你应该找到东西的游戏。

我的问题是，当我更改图像时出现错误，我使用 mapper.js 。

未捕获的TypeError：无法读取属性'getContext'为null

我的代码：（HTML）

<div id="myDiv">
    <img id="MainImage" class="mapper"
         src="0100.png" border="0" width="1000" height="707" orgWidth="1000" orgHeight="707" usemap="#map1" />

</div>

<map name="map1" id="map1">

    <area id="0101" shape="poly" onclick='myFunc(id)'
          coords="615,559,637,546,658,542,658,585,677,667,661,669,641,675,618,619" style="outline:none;" target="_self"     />
    <area id="0102" shape="poly" onclick='myFunc(id)'
          coords="903,537,919,534,928,554,948,659,935,662,922,626,915,659,902,657" style="outline:none;" target="_self"     />

    ....

    <area id="0105" shape="poly" onclick='myFunc(id)'
          coords="243,364,259,364,262,385,269,405,275,441,245,443" style="outline:none;" target="_self"     />
</map>


<map name="map2" id="map2">

    <area id="0201" shape="poly"
          coords="26,292,34,283,47,298,38,312,23,313" style="outline:none;" target="_self"     />

    ......

    <area id="0210" shape="poly"
          coords="685,505,696,472,716,498,713,572,688,566" style="outline:none;" target="_self"     />
</map>

这里有JavaScript：

var clickedIDs = [];
    var currLength = 5;

    function myFunc(id) {
        if (clickedIDs.indexOf(id) != -1) {
            return;
        }
        clickedIDs.push(id);
        document.getElementById(id).className = "noborder icolor00ff00";
        if (clickedIDs.length == currLength) {
            var myDiv = document.getElementById("myDiv");
            myDiv.innerHTML = '<img id=\'MainImage\' class=\'mapper\' src=\'0200.png\' border=0 width=1000 height=707 orgWidth=1000 orgHeight=707 usemap=\'#map2\' />';
        }
    }

当我点击前五个对象并使用InnerHTML更改图像时，我有错误。

将映射图像更改为另一个映射图像

0 个答案: