อยากรู้ว่าเอาไปใช้อย่างไร ก็คลิกดูที่วีดีโอ
คำสั่งที่ใช้ในวีดีโอ
<!DOCTYPE html>
<html>
<head>
<title>My web page</title>
<style type="text/css">
div#overlay {
display:none;
z-index:2;
background:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
text-align:center;
}
div#specialBox{
display:none;
z-index:3;
background:#fff;
color:#000;
position:relative;
margin:100px auto 0px auto;
width:500px;
heidht:400px;
}
div#main {
position:absolute;
top:0px;
left:0px;
padding-left:25px
}
</style>
<script type="text/javascript">
function toggleOverlay(obj) {
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var specialSpan = document.getElementById('specialSpan');
var specialPicture = document.getElementById('specialPicture');
overlay.style.opacity=.7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
specialPicture.src=obj.src;
specialSpan.innerHTML=obj.src;
}
}
</script>
</head>
<body>
<div id="overlay"></div>
<div id="specialBox">
<button onmousedown="toggleOverlay(this)">X</button>
<span id="specialSpan"></span>
<img id="specialPicture" src="" width="500px" height="375px"/>
</div>
<div id="main">
<h2>My web page</h2>
<p>Some web page content....</p>
<img onmousedown="toggleOverlay(this)" src="01.jpg" width="80px"/>
<img onmousedown="toggleOverlay(this)" src="02.jpg" width="80px"/>
<img onmousedown="toggleOverlay(this)" src="03.jpg" width="80px"/>
<img onmousedown="toggleOverlay(this)" src="04.jpg" width="80px"/>
<img onmousedown="toggleOverlay(this)" src="05.jpg" width="80px"/>
<img onmousedown="toggleOverlay(this)" src="06.jpg" width="80px"/>
</div>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น