0

ソーシャル リンクを含む画像のイメージ マップを作成しました。ただし、リンクを新しいウィンドウで開くように変更すると、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')\">"
4

1 に答える 1

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について

于 2013-04-27T00:44:49.500 に答える