gpt4 book ai didi

javascript - CSS 游标不适用于动态添加的 map 标签

转载 作者:行者123 更新时间:2023-11-28 12:21:55 24 4
gpt4 key购买 nike

这是我的代码:

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 中定义的静态图像做了类似的事情并且它有效,所以现在我很困惑为什么它不适用于动态创建的 map ?

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

最佳答案

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

我会补充说你的代码太复杂了。您不必添加 styleidshape 等属性(attr.value = "cursor:pointer"; 可能永远不会工作)。下面的代码工作正常,产生了一个很好的 1,1,100,100 map ,光标作为指针。但同样只能在 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);

添加标准事件:

绑定(bind)预定义函数:

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');
}

关于javascript - CSS 游标不适用于动态添加的 map 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13288553/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com