单独页面内如何实现对不同的链接调用不同的层
程序代码：
另外给大家提供需要解决问题的HTM文件下载的链接，希望大家尽快帮我解决这个技术问题！
链接地址：[url=http://focus.hustonline.net/zhuanti/dntf/Pro.rar]Pro.rar[/url]
程序代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片导航</title>
<script type="text/javascript">
function S(i) { return document.getElementById(i); }
function download( evt, fid){
var _event = evt ? evt : event;
var _target = evt ? evt.target : event.srcElement;
var _p = S( "downloadPanel" );
_p.style.top = _event.clientY + document.body.scrollTop ;
_p.style.left = ( _event.clientX + document.body.scrollLeft < 160 ? _event.clientX + document.body.scrollLeft + 10 : _event.clientX + document.body.scrollLeft - 120 );
Show( "downloadPanel" , true );
_p.focus();
}
function Show(obj, bShow) {
obj = (typeof(obj) == "string" ? S(obj) : obj);
if (obj) obj.style.display= (bShow ? "" : "none");
}
function hideDownloadPanel( evt ){
Show( "downloadPanel" ,false);
}
function checkClick(evt){
var _target = evt ? evt.target : event.srcElement ;
var _id = _target.id;
if( _id == "" ){
_id = _target.parentNode.id;
}
if( _id !="downloadDirect" && _id != "downloadAgent" && _id != "downloadPanel" && _id.indexOf( "downloadFile_" ) < 0 && _id.indexOf( "downloadLink_" ) < 0 ){
Show( "downloadPanel" , false );
}
}
window.onload = function(){
document.body.onclick=checkClick;
}
</script>
<style type="text/css">
html,body{
font-size:12px;
}
img {border:none}
a {color:#4d5d2c;text-decoration:underline;cursor:pointer;}
.pointer {cursor:pointer;}
.infobar {background:#fff9e3;border:1px solid #fadc80;color:#743e04;margin-bottom:10px;padding:8px 20px 4px 20px;}
</style>
</head>
<body>
<script language="JavaScript">
var x_open_path =""; //设置图标地址
</script>
<script language="JavaScript" src="js/x_open.js"></script>
<div style="position: absolute; width: 1122px; height: 800px; z-index: 1; left: 0px; top: 0px" id="mapguide">
<img src="mapguide.jpg" width="1122" height="800" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="123,747,246,777" href="#" alt="田蓬">
<area shape="rect" coords="118,439,241,469" href="#" alt="富宁">
<area shape="rect" coords="82,384,205,414" href="#" alt="富宁">
<area shape="rect" coords="126,342,249,372" href="#" alt="富宁">
<area shape="rect" coords="251,420,374,450" href="#" alt="富宁">
<area shape="rect" coords="269,357,392,387" href="#" alt="富宁">
<area shape="rect" coords="511,389,634,419" href="#" alt="归朝">
<area shape="rect" coords="840,0,963,30" href="#" alt="在归途">
<area shape="rect" coords="987,45,1110,75" href="#" alt="在路上" id="downloadLink_001" title="" onclick="download( event, 'downloadLink' );" >
<area shape="rect" coords="887,144,1010,174" href="#" alt="百色">
<area shape="rect" coords="731,94,854,124" href="#" alt="剥隘">
<area shape="rect" coords="502,272,625,302" href="#" alt="洞波" id="downloadLink_002" title="" onclick="download( event, 'downloadLink' );" >
</map>
<div id="downloadPanel1" style="position:absolute;top:0px;left:0px;width:242px;z-index:999;border:1px solid #fb7;display:none; padding-left:10px; padding-right:2px; padding-top:6px; padding-bottom:6px" class="infobar"><a onclick="hideDownloadPanel();">关闭</a>
<div style="padding:6px 0 0 0;">
<font size="3">
<a href="javascript:x_open('在路上', 'resources/7月5.6日/在路上/photodemo.htm',900,660)">在路上</a></font></div>
</div>
<div id="downloadPanel" style="position:absolute;top:135px;left:197px;width:242px;z-index:999;border:1px solid #fb7;display:none; padding-left:10px; padding-right:2px; padding-top:6px; padding-bottom:6px" class="infobar"><a onclick="hideDownloadPanel();">关闭</a>
<div style="padding:6px 0 0 0;">
<font size="3">
<a href="javascript:x_open('洞波', 'resources/7月11日/洞波/photodemo.htm',900,660)">洞波</a></font><font size="3">
</font>
<a href="javascript:x_open('果市瑶族小学', 'resources/7月11日/果市瑶族小学/photodemo.htm',900,660)">
<font size="3">果市瑶族小学</font></a> </div>
</div>
</body>
</html>
问题就出在点击不同的链接时调用的是相同的层。<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片导航</title>
<script type="text/javascript">
function S(i) { return document.getElementById(i); }
function download( evt, fid){
var _event = evt ? evt : event;
var _target = evt ? evt.target : event.srcElement;
var _p = S( "downloadPanel" );
_p.style.top = _event.clientY + document.body.scrollTop ;
_p.style.left = ( _event.clientX + document.body.scrollLeft < 160 ? _event.clientX + document.body.scrollLeft + 10 : _event.clientX + document.body.scrollLeft - 120 );
Show( "downloadPanel" , true );
_p.focus();
}
function Show(obj, bShow) {
obj = (typeof(obj) == "string" ? S(obj) : obj);
if (obj) obj.style.display= (bShow ? "" : "none");
}
function hideDownloadPanel( evt ){
Show( "downloadPanel" ,false);
}
function checkClick(evt){
var _target = evt ? evt.target : event.srcElement ;
var _id = _target.id;
if( _id == "" ){
_id = _target.parentNode.id;
}
if( _id !="downloadDirect" && _id != "downloadAgent" && _id != "downloadPanel" && _id.indexOf( "downloadFile_" ) < 0 && _id.indexOf( "downloadLink_" ) < 0 ){
Show( "downloadPanel" , false );
}
}
window.onload = function(){
document.body.onclick=checkClick;
}
</script>
<style type="text/css">
html,body{
font-size:12px;
}
img {border:none}
a {color:#4d5d2c;text-decoration:underline;cursor:pointer;}
.pointer {cursor:pointer;}
.infobar {background:#fff9e3;border:1px solid #fadc80;color:#743e04;margin-bottom:10px;padding:8px 20px 4px 20px;}
</style>
</head>
<body>
<script language="JavaScript">
var x_open_path =""; //设置图标地址
</script>
<script language="JavaScript" src="js/x_open.js"></script>
<div style="position: absolute; width: 1122px; height: 800px; z-index: 1; left: 0px; top: 0px" id="mapguide">
<img src="mapguide.jpg" width="1122" height="800" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="123,747,246,777" href="#" alt="田蓬">
<area shape="rect" coords="118,439,241,469" href="#" alt="富宁">
<area shape="rect" coords="82,384,205,414" href="#" alt="富宁">
<area shape="rect" coords="126,342,249,372" href="#" alt="富宁">
<area shape="rect" coords="251,420,374,450" href="#" alt="富宁">
<area shape="rect" coords="269,357,392,387" href="#" alt="富宁">
<area shape="rect" coords="511,389,634,419" href="#" alt="归朝">
<area shape="rect" coords="840,0,963,30" href="#" alt="在归途">
<area shape="rect" coords="987,45,1110,75" href="#" alt="在路上" id="downloadLink_001" title="" onclick="download( event, 'downloadLink' );" >
<area shape="rect" coords="887,144,1010,174" href="#" alt="百色">
<area shape="rect" coords="731,94,854,124" href="#" alt="剥隘">
<area shape="rect" coords="502,272,625,302" href="#" alt="洞波" id="downloadLink_002" title="" onclick="download( event, 'downloadLink' );" >
</map>
<div id="downloadPanel1" style="position:absolute;top:0px;left:0px;width:242px;z-index:999;border:1px solid #fb7;display:none; padding-left:10px; padding-right:2px; padding-top:6px; padding-bottom:6px" class="infobar"><a onclick="hideDownloadPanel();">关闭</a>
<div style="padding:6px 0 0 0;">
<font size="3">
<a href="javascript:x_open('在路上', 'resources/7月5.6日/在路上/photodemo.htm',900,660)">在路上</a></font></div>
</div>
<div id="downloadPanel" style="position:absolute;top:135px;left:197px;width:242px;z-index:999;border:1px solid #fb7;display:none; padding-left:10px; padding-right:2px; padding-top:6px; padding-bottom:6px" class="infobar"><a onclick="hideDownloadPanel();">关闭</a>
<div style="padding:6px 0 0 0;">
<font size="3">
<a href="javascript:x_open('洞波', 'resources/7月11日/洞波/photodemo.htm',900,660)">洞波</a></font><font size="3">
</font>
<a href="javascript:x_open('果市瑶族小学', 'resources/7月11日/果市瑶族小学/photodemo.htm',900,660)">
<font size="3">果市瑶族小学</font></a> </div>
</div>
</body>
</html>
另外给大家提供需要解决问题的HTM文件下载的链接，希望大家尽快帮我解决这个技术问题！
链接地址：[url=http://focus.hustonline.net/zhuanti/dntf/Pro.rar]Pro.rar[/url]
2008-9-11 13:06