Квадрат разбит на четыре цветовых сектора относительно осей. При попадании курсора мыши на любой сектор, он должен плавно расширяться от центра до определенного размера. По кнопке он должен возвращаться в начальное состояние.
Я в растерянности! Почему-то не работает, когда я попадаю курсором на любой сектор, он не расширяется, подскажите, в чём ошибка?
<html>
<head>
<body background="Фон.jpg" font="" color="#bb000" alink="#bb000" vlink="#bb000">
<style>
img {border: 0;}
</style>
<script language="JavaScript">
function run (action, flag) {
if (action == "back") {
for (i = 0; i < 4; i ++) {
document.images[i].width = 100;
document.images[i].height = 100;
document.images[i].style.top = "100px";
document.images[i].style.left = "100px";
}
return 0;
}
if (flag == 0)
clearTimeout (timer);
else
if (document.images[action].width >40) {
timer = setTimeout ("run (" + action + ", " + flag + ")", 20);
document.images[action].width += 4;
document.images[action].height += 4;
document.images[action].style.top = 70+(150+document.images[action].height)/2;
document.images[action].style.left = 70+(150+document.images[action].width)/2;
}
</script>
</head>
<div style="LEFT: 490px; POSITION: absolute; TOP: 130px">
<input type="button" value="Восстановить квадрат" onclick="run('back')">
</div>
<body style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">
<img style="LEFT: 70px; POSITION: absolute; TOP: 70px" height="150" src="1.PNG" width="150">
<img style="LEFT: 220px; POSITION: absolute; TOP: 70px" height="150" src="2.PNG" width="150">
<img style="LEFT: 220px; POSITION: absolute; TOP: 220px" height="150" src="3.PNG" width="150">
<img style="LEFT: 70px; POSITION: absolute; TOP: 220px" height="150" src="4.PNG" width="150" usemap="#sectors">
<map name="sectors">
<area shape="POLY" coords="70,70,220,70,220,220,70,220" onmouseover="run(0, 1)" onmouseout="run(0, 0)" alt="Сектор 1">
<area shape="POLY" coords="220,70,370,70,370,220,220,220" onmouseover="run(1, 1)" onmouseout="run(1, 0)" alt="Сектор 2">
<area shape="POLY" coords="70,220,220,220,220,370,70,270" onmouseover="run(2, 1)" onmouseout="run(2, 0)" alt="Сектор 3">
<area shape="POLY" coords="220,220,370,220,370,370,220,370" onmouseover="run(3, 1)" onmouseout="run(3, 0)" alt="Сектор 4">
</map>
</body>
</html>