JS求助

软件  |  电脑网络

在html中有一图上有几个热区,当点击热区时弹出隐藏层,层中有一个button,怎样才能用JS做到点击不同热区在弹出层中点击确定链接到每个热区对应的页面?
分享:
2017-03-26

2017-03-26最佳答案

点击热区再链接到相应页面,直接通过热区的href属性就可以做到了,做个隐藏层再点击一个button来确认链接,不知是否是要确认后再执行操作的意思。不过在JS中也可以用提示框来实现,给你个参考,看是否满足需求:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function clickArea(areaId){
switch(areaId){
case 'area1':
if(confirm("你点击热区1,确定下一步操作吗?")){
var areaObj = document.getElementById("area1");
alert("链接到百度网");
areaObj.href = "http://www.baidu.com";
}
break;
case 'area2':
if(confirm("你点击热区2,确定下一步操作吗?")){
var areaObj = document.getElementById("area2");
alert("链接到谷歌网");
areaObj.href = "http://www.google.com";
}
break;
case 'area3':
if(confirm("你点击热区3,确定下一步操作吗?")){
var areaObj = document.getElementById("area3");
alert("链接到腾讯网");
areaObj.href = "http://www.qq.com";
}
break;
case 'area4':
if(confirm("你点击热区4,确定下一步操作吗?")){
var areaObj = document.getElementById("area4");
alert("链接到新浪网");
areaObj.href = "http://www.sina.com";
}
break;
}
}
</script>
</head>

<body>
<img src="http://news3.xinhuanet.com/auto/2005-07/05/xinsrc_09207020509477952890519.jpg" alt="" width="500" height="311" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area id="area1" shape="rect" coords="6,5,249,168" href="#" onclick="clickArea('area1')"/>
<area id="area2" shape="rect" coords="256,9,495,171" href="#" onclick="clickArea('area2')"/>
<area id="area3" shape="rect" coords="2,176,247,310" href="#" onclick="clickArea('area3')"/>
<area id="area4" shape="rect" coords="254,178,490,310" href="#" onclick="clickArea('area4')"/>
</map>
</body>
</html>