我为一张有社交链接的图片制作了一张图片地图。但是,当我在新窗口中将链接更改为打开时,我丢失了OnMouseOver
光标。顺便说一句,这一切都在JavaScript中。我试过把它放进去,但它似乎没有在任何地方工作。当我点击图像时,它们会转到一个新窗口,但光标不会改变,因此用户不知道它们在链接上。代码如下。
任何有关如何取消这一点的想法都会很棒。谢谢!
document.getElementById('topdiv').innerHTML = "<img border=\"0\" style=\"padding-right: 10px;\" src=\"../images/social_hor.png\" usemap=\"#socialmap\"><map name=\"socialmap\"><area shape=\"rect\" coords=\"320,0,365,50\" onClick=\"window.open('https://www.facebook.com/NCHSoftware')\" OnMouseOver='this.style.cursor='pointer';'><area shape=\"rect\" coords=\"375,0,420,50\" onClick=\"window.open('https://plus.google.com/+nchsoftware')\"><area shape=\"rect\" coords=\"425,0,470,50\" onClick=\"window.open('https://twitter.com/nchsoftware')\">"
答案 0 :(得分:1)
所以我翻译了你在问题中发布的 HORRIBLE 这一行(我猜这就是为什么人们没有考虑你的问题)我来了对你来说这个例子,你当然还需要在页面中正确实现它。
<强> CSS 强>
myImage {
padding-right: 10px;
}
<强> HTML 强>
<div id="topdiv"></div>
<强>的Javascript 强>
var topdiv = document.getElementById('topdiv'),
map,
tempVar;
function area1() {
alert("you clicked in area1");
}
function area2() {
alert("you clicked in area2");
}
function area3() {
alert("you clicked in area3");
}
function pointerOn(evt) {
evt.target.style.cursor = "hand";
}
function pointerOff(evt) {
evt.target.style.cursor = "auto";
}
map = document.createElement("map");
map.name = "socialmap";
tempVar = document.createElement("area");
tempVar.shape = "rect";
tempVar.coords = "0,0,99,50";
tempVar.href = "#";
tempVar.addEventListener("click", area1, false);
tempVar.addEventListener("mouseover", pointerOn, false);
tempVar.addEventListener("mouseout", pointerOff, false);
map.appendChild(tempVar);
tempVar = document.createElement("area");
tempVar.shape = "rect";
tempVar.coords = "100,0,199,50";
tempVar.href = "#";
tempVar.addEventListener("click", area2, false);
tempVar.addEventListener("mouseover", pointerOn, false);
tempVar.addEventListener("mouseout", pointerOff, false);
map.appendChild(tempVar);
tempVar = document.createElement("area");
tempVar.shape = "rect";
tempVar.coords = "200,0,299,50";
tempVar.href = "#";
tempVar.addEventListener("click", area3, false);
tempVar.addEventListener("mouseover", pointerOn, false);
tempVar.addEventListener("mouseout", pointerOff, false);
map.appendChild(tempVar);
topdiv.appendChild(map);
tempVar = document.createElement("img");
tempVar.className = "myImage";
tempVar.src = "http://i860.photobucket.com/albums/ab165/ATnightshift/image001.gif";
tempVar.useMap = "#socialmap";
topdiv.appendChild(tempVar);
上