| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 551 人关注过本帖
标题:求助!这段怎么改?
只看楼主 加入收藏
lxt2133231
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2009-10-30
结帖率:0
收藏
已结贴  问题点数:20 回复次数:1 
求助!这段怎么改?
请问:我要把这段代码改成---"点我试试"换成图片,当点击这个图片,弹出的DIV里就显示这张图片.要把这两张图片关联起来,做成相册.
大家帮帮忙,请问怎么改?



<style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
    z-index:10001;
    width:500px;
    height:400px;
    background:white;
    border:#336699 1px solid;
    position:absolute;
    left:50%;
    top:20%;
    font-size:12px;
    margin-left:-225px;
    display: none;
}
#bgDiv {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
    opacity: 0.6;
}
</style>
<script type="text/javascript">
function showDetail() {
//背景
  var bgObj=document.getElementById("bgDiv");
  bgObj.style.width = document.body.offsetWidth + "px";
  bgObj.style.height = screen.height + "px";

//定义窗口
  var msgObj=document.getElementById("msgDiv");
  msgObj.style.marginTop = -75 +  document.documentElement.scrollTop + "px";

//关闭
  document.getElementById("msgShut").onclick = function(){
  bgObj.style.display = msgObj.style.display = "none";
  }
  msgObj.style.display = bgObj.style.display = "block";
  msgDetail.innerHTML="<p align=center>小窗口里的内容</p>"
}
</script>
</head>

<body>

<div id="msgDiv">
    <div id="msgShut">
        关闭</div>
    <div id="msgDetail">
    </div>
</div>
<div id="bgDiv">
</div>
<p> </p>
<p><a href="#" onClick="showDetail()">点我试试</a></p>
<p></a> </p>
<p> </p>
<p> </p>
<p> </p>


</body>

</html>
搜索更多相关主题的帖子: background absolute position display border 
2009-10-30 23:10
aspic
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:51
帖 子:2258
专家分:8050
注 册:2008-2-18
收藏
得分:20 
程序代码:
<style>
body {font-size:12px;background:#9EC7E7}
img {border:0px}
#msgDiv {
    z-index:10001;
    width:500px;
    height:400px;
    background:white;
    border:#336699 1px solid;
    position:absolute;
    left:50%;
    top:20%;
    font-size:12px;
    margin-left:-225px;
    display: none;
}
#bgDiv {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)
    opacity: 0.6;
}
</style>
<script type="text/javascript"> 
function showDetail(img) { 
//背景
  var bgObj=document.getElementById("bgDiv");
  bgObj.style.width = document.body.offsetWidth + "px";
  bgObj.style.height = screen.height + "px";

//定义窗口
  var msgObj=document.getElementById("msgDiv");
  msgObj.style.marginTop = -75 +  document.documentElement.scrollTop + "px";

//关闭
  document.getElementById("msgShut").onclick = function(){
  bgObj.style.display = msgObj.style.display = "none";
  }
  msgObj.style.display = bgObj.style.display = "block";
  msgDetail.innerHTML="<img src="+img.src+" />"
}
</script>
</head>

<body>

<div id="msgDiv">
    <div id="msgShut">关闭</div>
    <div id="msgDetail"></div>
</div>
<div id="bgDiv"></div>
<p> </p>
<p><img src="你的图片路径" onClick="showDetail(this)" /></p>
<p></a> </p>
<p> </p>
<p> </p>
<p> </p>


</body>

</html> 
没有测试 自己试
2009-10-31 14:29
快速回复:求助!这段怎么改?
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.033047 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved