Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

JavaScript III част

Анимации в JavaScript

JavaScript може да се използва за анимиране на изображения. В следващият пример ще добавим изображение, което ще служи като бутон за връзка към уеб страница. След това ще добавим събития onMouseOver и onMouseOut, които ще извикват за изпълнение две JavaScript функции за да се променят изображенията. Първото изображение е обикновено, а второто е предварително приготвена gif анимация. Могат да се използват и две обикновени различни изображения.
В секцията body е представен HTML кода, който взаимодейства с JavaScript в секцията head. На изображението на бутона е дадено условно наименование id="img_but" за да може JavaScript да го адресира. При събитие onMouseOver програмата кара браузъра да изпълни функцията mouseOver() за да се замени изображението apple_steady.gif с apple_animated.gif. Събитието onMouseOut кара браузъра да изпълни функцията mouseOut() и нещата се връщат в изходно състояние (виж примера в браузъра):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Анимация в JavaScript </title>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("img_but").src ="subsidiary/apple_animated.gif";
}
function mouseOut()
{
document.getElementById("img_but").src ="subsidiary/apple_steady.gif";
}
</script>
</head>

<body>
<a href="http://dimarini.net" target="_blank">
<img border="0" alt="Безплатни видео уроци!" src="/subsidiary/apple_steady.gif" id="img_but" width="92" height="92"
 onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>