Question

我的代码来了：

function addAlbum(){
    var attr;
    var parent;
    var newelement;

    /*image*/
    newelement = document.createElement("img");
    newelement.src = "criar_album.png";

    attr = document.createAttribute("id");
    attr.value = "addalbum";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("usemap");
    attr.value = "#addalbum_map";
    newelement.setAttributeNode(attr);

    parent = document.getElementById("content");
    parent.appendChild(newelement);
    /*-----------------------------------------*/

    /*map*/
    newelement = document.createElement("map");

    attr = document.createAttribute("id");
    attr.value = "album_map";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("style"); /*this part is failing I guess*/
    attr.value = "cursor:pointer";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("name");
    attr.value = "addalbum_map";
    newelement.setAttributeNode(attr);

    parent = document.getElementById("addalbum");
    parent.appendChild(newelement);
    /*-----------------------------------------*/

    /*area*/
    newelement = document.createElement("area");

    attr = document.createAttribute("shape");
    attr.value = "rect";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("coords");
    attr.value = "73, 238, 115, 264";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("onclick");
    attr.value = "createAlbum()";
    newelement.setAttributeNode(attr);

    attr = document.createAttribute("onmouseover");
    attr.value = "highlightOn(470,320,511,346,2)";
    newelement.setAttributeNode(attr);

    parent = document.getElementById("album_map");
    parent.appendChild(newelement);
    /*-----------------------------------------*/
}

除非部分光标在区域元素上传递，否则一切似乎都能正常工作。我用html中定义的静态图像做了类似的事情并且它有效，所以现在我很困惑为什么它不能用于动态创建的地图？

P.S。：已经为CSS中的“addalbum”id定义了样式，但它没有帮助。顺便说一句，我知道，有很多方法可以通过定义href等棘手的方式来实现，但我想知道这里真正的问题是什么。

Answer 1

如果您使用的是Chrome或Safari，请参阅此答案。 Cursor not changing to pointer in Usemap/area case

我会补充说你的代码太复杂了。您不必添加style，id，shape等属性（attr.value = "cursor:pointer";可能永远不会起作用）。下面的代码工作正常，产生一个漂亮的1,1,100,100映射，光标作为指针。但是，仅适用于Opera和Firefox等浏览器，但不适用于Chrome或Safari（WebKit）。

var body=document.getElementsByTagName('body')[0];

var img = document.createElement("IMG");
img.src='1.gif';
img.useMap='#album_map';

var map = document.createElement("MAP");
map.id="album_map";
map.style.cursor="pointer"; //the right way

var area  = document.createElement("AREA");
area.shape='rect';
area.coords="1, 1, 100, 100";

map.appendChild(area);
body.appendChild(map);
body.appendChild(img);

添加标准活动：

绑定预定义函数：

function imgClick() {
    alert('click');
}

body=document.getElementsByTagName('body')[0];
var img = document.createElement("IMG");
img.src='image.gif';
img.onclick=imgClick;
body.appendChild(img);

或通过所谓的匿名函数：

img.onclick=function() {
    alert('click');
}

CSS游标无法动态添加地图标记

1 个答案: