Tuesday, July 15, 2008

用js动态实现图片热区

代码如下:
<html>
<body>
<button onclick="init();">init</button>
<img src='20080319_96325f230767e6ac385beuTiIglWzzkf.png' border=0 usemap='#Map'>
<map name="Map" id="MAP"></map>
<div id="maskDIV"></div>
<script language="JavaScript">
var maskDiv;
function mask(param){
if (!maskDiv)
{
maskDiv = document.getElementById('maskDIV');
maskDiv.style.position='absolute';
maskDiv.style.backgroundColor="red";
//document.appendChild(maskDiv);
}
maskDiv.innerHTML=param.title;
maskDiv.style.left=param.left+"px";
maskDiv.style.top=param.top+"px";
}

function init(){
var oAREA = document.createElement('AREA');
oAREA.shape = 'rect';
oAREA.coords = '0,0,225,299';
oAREA.href = 'showcity.aspx?cityid=10600';
oAREA.alt = '北京市西城区';
oAREA.title = '北京市西城区';
oAREA.onmouseover=function(e){
mask({left:e.clientX,top:e.clientY,title: oAREA.title});
}
document.getElementById("MAP").appendChild(oAREA);
}
</script>
</body>
</html>

好了, 技术问题搞定, 剩下的就是你的发挥了!
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)