Эффект визуального удаления изображения
Напишем сценарий, во время работы которого при наведении курсора мыши на изображение оно начинает удаляться от зрителя, уменьшаясь в размерах. При решении такой задачи воспользуемся свойствами width объекта image. При каждом вызове функции succpict () изменяется размер выводимого изображения и этим достигается эффект удаления от зрителя. Функция setTimeout("succpict()", 500) производит повторный вызов функции succpict () через каждые полсекунды. Когда размер изображения уменьшится до заданного, движение прекратиться.
(dmi16)
<html>
<head>
<title>dmi16</title>
<script language="JavaScript">
<!-- //
function succpict ()
{var d=document
var w=d.mypict.width
if (w >50)
{d.mypict.width=w-10
d.mypict.src="m1.jpg"
setTimeout("succpict()", 500)
}
}
//-->
</script>
</head>
<body>
ооооо
<img src="m1.jpg" name=mypict width=200 onMouseOver="succpict ()">
.
</body>
</html>
Эффект визуального приближения изображения.
Напишем сценарий, при выполнении которого заданное изображение начинает увеличиваться, т.е. моделируется эффект приближения изображения. Эта задача в некотором смысле является обратной к только что рассмотренной. Будем увеличивать при каждом вызове функции размер изображения до тех пор, пока оно не достигнет заданного размера. Повторные вызовы функции grpict () обеспечиваются функцией setTimeout, параметры которой следует подобрать в зависимости от изображения.
(dmi17)
<html>
<head>
<title>dmi17</title>
<script language="JavaScript">
<!-- //
function grpict ()
{var d=document
var w=d.mypict.width
if (w<300)
{d.mypict.width=w+10
d.mypict.src="m2.jpg"
setTimeout("grpict()", 500)
}
}
//-->
</script>
</head>
<body>
p
<img src="m2.jpg" name=mypict width=100 onMouseOver="grpict ()">
</body>
</html>
Задание: Придумать сценарий, где по сюжету одна картинка уменьшается, а другая увеличивается (Например, "Алиса в стране чудес". Гриб увеличивается, Алиса уменьшается).
Смена изображений при наведении указателя мыши.
Напишем сценарий, во время работы которого смена рисунков происходит при наведении курсора мыши на изображение. При перемещении пользователем курсора мыши над изображнением возникает событие MouseOver. Опишем функцию succpict(), которая будет реакцией на это событие, и определит, какое изображение следует поместить в документ. Воспользуемся тем фактом, что загружаемые изображения храняться в файлах с именами m1.jpg, ..., m3.jpg. Для загрузки к-го изображения формируется имя файла по формуле "m"+k+".jpg".
(dmi18)
<html>
<head>
<title>dmi18</title>
<script language="JavaScript">
<!-- //
var k=1
function succpict()
{var d=document
if (k<3)
k=k+1
else k=1
d.mypict.src="m"+k+".jpg"}
//-->
</script>
</head>
<body>
<img src="m1.jpg" name=mypict width=150 onMouseOver="succpict ()">
</body>
</html>
Задание. Дана картина, состоящая из фрагментов разных картин. Нужно восстановить хотя бы одну картину при наведении указателя мыши на фрагменты картин. (Достаточно взять две картины, каждую разделить на равные четыре части. Части картины поместить в ячеки таблицы)
ДОПОЛНИТЕЛЬНО
.(Лекции2005)
Задание. По фамилии школьника определите его порядковый номер в классном журнале.
Задание.
Задание Напишите сценарий, который для двух изображений на одном экране позволяет менять значения параметров ширины и высоты, создавать рамку вокруг изображения и задавать альтернативный текст.
Задание Напишите сценарий обработки анкеты (анкету придумать самим)
Задание Рисунок разрезали на 4 части и перепутали местами. Нужно восстановить рисунок.