First off, I'm a beginner with JavaScript so please be kind :). I am trying to get rid of a blue border on my image map and trying to get my links to open up in new windows. @Xotic750 has been very nice to re-write my code. I've tried a few things to do this, but I really don't want to mess up how nice the code is that they did and the few things I've tried weren't working. Any help is much appreciated!
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);
Set the image border
attribute to 0
to get rid of the blue borders. For opening in new windows, set the target
attribute to be _blank
, although this may also open the link in a new tab; it depends on the browser setting.