2015-04-30
934
С помощью сценариев JavaScript можно создавать простые визуальные эффекты: приближение и удаления изображения, перемещения изображения по странице и многое другое. Начнем с самых простых примеров, использующих только те средства, которые нам известны к настоящему времени.
Эффект приближения изображения
Напишем сценарий, при выполнении которого изображение начинает увеличиваться, как только курсор мыши попадает в область изображения. При решении задачи воспользуемся свойством width объекта Image. При каждом вызове функции grpict1() увеличивается размер выводимого изображения. Когда ширина выводимого изображения станет более 200, то движение прекратиться. HTML- код документа с описанным визуальным эффектом приведен в листинге 4.7.
| Листинг 4.7. Увеличивающееся изображение |
<HTML>
<HEAD>
<TITLE>Увеличивающееся изображение</TITLE>
<SCRIPT LANGUAGE=”JavaScript">
<!--
var d = document
var w = 100
// эффект увеличения изображения
function grpict1()
{ if (w < 200)
{ w= w+10
d.mypict.width = w
setTimeout("grpict1()", 500)
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h4>При наведении курсора мыши на рисунок, изображение начинает приближаться к зрителю.</h4>
<img src="p1.jpg" name=mypict width=100 onMouseOver="grpict1()">
</BODY>
</HTML>
Нетрудно решить и обратную задачу, т.е. при наведении курсора мыши изображение уменьшается в размерах, как бы удаляясь от зрителя.
