Слои в JavaScript
Квадрат разбит на четыре цветовых сектора относительно осей. При попадании курсора мыши на любой сектор, он должен плавно расширяться от центра до определенного размера. По кнопке он должен возвращаться в начальное состояние.
Я в растерянности! Почему-то не работает, когда я попадаю курсором на любой сектор, он не расширяется, подскажите, в чём ошибка? <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>
|
оно на голом css делается все на w3schools css3 смотри
|
qwerty-клавиатура, толсто
|
нет, css нельзя применять, только javascript
|
сегодня подходила к преподу, тот сказал, что ошибка где-то в этих строчках и чтобы я загуглила как это исправить :)
if (flag == 0) clearTimeout (timer); else if (document.images[action].width >40) { timer = setTimeout ("run (" + action + ", " + flag + ")", 20); ....... } |
У последнего if'а фигурной скобки нет
|
olgaa, if не закрыт. Учитесь пользоваться консолью там все ошибки ваши пишутся.(даже если вам нафиг оно не надо, консоль вызывается одним кликом\сочетанием клавиш)
|
а как же тогда можно исправить эти 2 мои страшные ошибки? что Вы можете посоветовать по этому поводу?
|
Opera Ctrl+Shift+I, Chrome F12
<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>
ну исправил я ошибки, чо это вообще такое? |
Очевидно же, что оно нафиг не впёрлось. Предмет из разряда сдал и забыл.
Так что тем кто верит в женские ники - делать задание нормально(а вдруг отблагодарят, ога), остальным - расходиться.) |
| Часовой пояс GMT +3, время: 17:34. |