Search code examples
javascripthyperlinkimagemap

Getting rid of blue border and opening links in new window in Javascript


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

Solution

  • 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.