OnMouseOver功能不起作用

Question

我製作了帶有社交鏈接的圖片的圖片地圖。但是，當我將鏈接更改爲在新窗口中打開時，我丟失了我的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')\">" 

Answer 1

所以我翻譯這，你在你的問題貼太可怕了線（我想這就是爲什麼人們沒有給你任何問題考慮），我想出了這個例子給你，當然你仍然需要在頁面中正確實現它。

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

在jsfiddle