![]() |
#2
aspic2009-10-31 14:29
![]() <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> |
请问:我要把这段代码改成---"点我试试"换成图片,当点击这个图片,弹出的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>