所以我翻译这,你在你的问题贴太可怕了线(我想这就是为什么人们没有给你任何问题考虑),我想出了这个例子给你,当然你仍然需要在页面中正确实现它。
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
非常感谢!是的,我是初学者。试图将它们拼凑在一起是一个缓慢的过程。感谢您的帮助! – user2311979 2013-04-29 16:56:39
希望你不介意我再次窃听你,我敢肯定,如果我这样做,它会弄乱你的干净的代码。所以有一个蓝色的边框,链接不会在新窗口中打开。所以我基本上回到了我开始的地方,但显然是一个更有效的方式来写出来。你介意告诉我如何解决这两件事?谢谢! – user2311979 2013-04-29 17:40:25
你真的需要打开一个新的问题,包括你的改变的代码和链接给你jfsiddle,然后我们可以看看这个特定的问题。 – Xotic750 2013-04-29 17:55:37