<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<style>
#fog {
position: absolute;
display: none;
top: 0;
left: 0;
background-color: #fff
}
#modalbox {
width: 200px;
height: 150px;
position: absolute;
display: none;
z-index: 2
}
</style>
<script type="text/javascript">
var modalbox;
var scrollWidth;
var scrollHeight;
window.onload = function() {
modalbox = document.getElementById("modalbox");
scrollWidth = document.body.scrollWidth;
scrollHeight = document.body.scrollHeight;
document.getElementById("fog").style.width = scrollWidth;
document.getElementById("fog").style.height = scrollHeight;
}
function showModalbox() {
document.getElementById("fog").style.filter = "alpha(opacity=80)";
document.getElementById("fog").style.opacity = 0.8;
document.getElementById("fog").style.display = "block";
modalbox.style.display = "block";
modalbox.style.left = Math.round(scrollWidth / 2) - 200;
modalbox.style.top = document.body.scrollTop + 250;
}
function cancelModalBox() {
document.getElementById("fog").style.display = "none";
modalbox.style.display = "none";
}
function showImages() {
document.getElementById("currentImg").value = "1";
showModalbox();
}
function nextImage(cmd) {
var currentImg = document.getElementById("currentImg");
if (cmd == "next") {
if (!currentImg.value == 5) {
currentImg.value = parseInt(currentImg.value) + 1;
}
} else {
if (!currentImg.value == 1) {
currentImg.value = parseInt(currentImg.value) - 1;
}
}
document.getElementById("dynamicImg").src = "images/0" + currentImg.value + ".jpg";
}
</script>
<head>
<title>My web site</title>
</head>
<div id="currentImg"/>
<input type="image" src="buttons/images.gif" height="40" width="80" onClick="showImages()">
<div id="modalbox">
<div id="body">
<table width="100%">
<tr>
<td align="right" colspan="3">
<input type="image" src="buttons/close.gif" onclick="javascript
:cancelModalBox()">
</td>
</tr>
<tr>
<td>
<input type="image" src="buttons/left arrow.gif" onClick="javascript
:nextImage('previous')">
</td>
<td>
<input type="image" id="dynamicImg" src="images/01.jpg" width="200" height="150">
</td>
<td>
<input type="image" src="buttons/right arrow.gif"
onClick="javascript
:nextImage('next')">
</td>
</tr>
</table>
</div>
</div>
<div id="fog"/>
</html>
Имеется такая страничка. Проблем несколько.
1. При нажатие на кнопку (images) выскакивает окошко но оно выскакивает почему то у левой стенки хотя в скрипте задается координаты примерно посередине окна.
2. При нажатие на кнопку так же должен "ложиться туман" <div id="fog"/> однако почему то его размеры остаются нулевыми. В итоге он ничего не покрывает.
3. В появившемся окошке есть стрелочки но при нажатие на них срабатывает скрипт nextImage() однако почему то в нем значение currentImg.value не увеличивается и не уменьшается.
Может я не те аттрибуты меняю, но что то никак не получается.
