Question

首先，我是JavaScript的初学者，所以请善待:)。我试图摆脱我的图像地图上的蓝色边框，并尝试让我的链接在新窗口中打开。 @ Xotic750非常适合重新编写我的代码。我已经尝试了一些方法来做到这一点，但我真的不想搞砸他们做的代码有多好，而且我尝试过的一些东西都没用。非常感谢任何帮助！

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 = "320,0,365,50";
tempVar.href = "https://www.facebook.com/NCHSoftware";
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 = "375,0,420,50";
tempVar.href = "https://plus.google.com/+nchsoftware";
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 = "425,0,470,50";
tempVar.href = "https://twitter.com/nchsoftware";
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 = "../images/social_hor.png";
tempVar.useMap = "#socialmap";
topdiv.appendChild(tempVar);

Answer 1

将图片border属性设置为0以摆脱蓝色边框。要在新窗口中打开，请将target属性设置为_blank，但这也可能会在新标签中打开链接;这取决于浏览器设置。

在Javascript中删除蓝色边框并在新窗口中打开链接

1 个答案: