Библиотека Javascript SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Фото открывается с анимацией разворачиванием по горизонтали от линка</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#window {background: #fc0;width: 600px; height: 700px;position: absolute;
left: 20%; top: 10%;margin-left: -150px; margin-top: -100px;clip: rect(auto 150 auto 150)}
#window2 {background: #fc0;width: 600px; height: 700px;position: absolute;
left: 20%; top: 10%;margin-left: -150px; margin-top: -100px;clip: rect(auto 150 auto 150)}
#title {background: #666; padding: 5px; font-weight: bold; text-align: right}
#title A {color: white; text-decoration: none}
</style>
<script language="JavaScript">
step = 10
width = 600
x1 = x2 = width/2
function curtainOn() {
// Отображаем слой window в браузере Opera
if (Opera) document.getElementById("window").style.display = "block"
if (x1 > 0) {
x1 -= step
x2 += step
clip = "auto " + x2 + " auto " + x1
document.getElementById("window").style.clip = "rect(" + clip + ")"
setTimeout("curtainOn()", 30)
}}
function curtainOff() {
if (x2 > (width/2)) {
x1 += step
x2 -= step
clip = "auto " + x2 + " auto " + x1
document.getElementById("window").style.clip = "rect(" + clip + ")"
setTimeout("curtainOff()", 30)
}
// Прячем слой window в браузере Opera
else if (Opera) document.getElementById("window").style.display = "none"
}
function curtainOn2() {
// Отображаем слой window в браузере Opera
if (Opera) document.getElementById("window2").style.display = "block"
if (x1 > 0) {
x1 -= step
x2 += step
clip = "auto " + x2 + " auto " + x1
document.getElementById("window2").style.clip = "rect(" + clip + ")"
setTimeout("curtainOn2()", 30)
}}
function curtainOff2() {
if (x2 > (width/2)) {
x1 += step
x2 -= step
clip = "auto " + x2 + " auto " + x1
document.getElementById("window2").style.clip = "rect(" + clip + ")"
setTimeout("curtainOff2()", 30)
}
// Прячем слой window в браузере Opera
else if (Opera) document.getElementById("window2").style.display = "none"
}
</script>
</head>
<body>
<a href="javascript: curtainOn()"><img src=http://www.03www.su/pic/001.jpg width=100></a><br/>
<div id=window onclick="javascript: curtainOff()">
<div id=title><a href="javascript: curtainOff()">Закрыть  [X]</a></div>
<img src=http://www.03www.su/pic/001.jpg width=600>
</div>
<br><br>
<a href="javascript: curtainOn2()"><img src="http://www.03www.su/pic/002.jpg" width="100" alt""></a><br/>
<div id=window2 onclick="javascript: curtainOff2()">
<div id=title><a href="javascript: curtainOff2()">Закрыть  [X]</a></div>
<img src="http://www.03www.su/pic/002.jpg" width="600" alt="">
</div>
<script language="JavaScript">
// Проверяем, какой браузер перед нами
Opera = document.getElementById && window.opera
// Если Opera. то прячем слой window
if (Opera) document.getElementById("window").style.display = "none" 
if (Opera) document.getElementById("window2").style.display = "none" 
</script>
</body>  
</html>