24. JavaScript Animation

JavaScript Animation

The HTML Code
The JavaScript Code
The Entire Code

With Javascript, we can create animated images.

The trick is let a JavaScript change between different images on different events.

The HTML Code
<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="visit w3schools!" src="b_pink.gif" id="b1" onmouseOver="mouseOver()" onmouseOut="mouseOut()"/></a>
we have given the image an id,
to make it possible for javascript to address it later.

The onMouseOver event tells  the browser that once a mouse is rolled over the image,
the browser should execute a function that replaces the image with another image.

The onMouseOut event tells the browser that once a mouse is rolled away from the image,
another Javascript function should execute. This function inserts the original image agine.

The JavaScript Code
<script type="text/javascript">
functin mouseOver()
{
document.getElementById("b1").src="b_blur.gif";
}
function mouseOut()
{
document.getElementById("b1").src="b_pink.gif";
}
</script>

The function mouseOver() causes the image to shift to "b_blur.gif"
The function mouseOut() causes the image to shift to "b_pink.gif"

The Entire Code

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src="b_blue.gif";
}
function mouseOut()
{
document.getElementById("b1").src="b_pink.gif";
}
</script>
</head>
<body>
<a href="http://www.w3schools.com" target="_blank">
<img border="0" alt="visit w3schools!" src="b_pink.gif" id="b1" width="26" height="26" onmouseOver="mouseOver()" onmouseout="mouseOut()"/></a>
</body>
</html>

1 comment:

Unknown said...

Great post. Thanks for sharing such useful coding in JavaScript and HTML for creating animated images.

http://www.cliffanimation.com

My Favorite Books

  • C and Data Structures by Ashok N. kamthane
  • Web Technologies by A. A. Puntambekar
  • Learn HTML and CSS with W3Schools
  • Learn JavaScript and Ajax with W3Schools
  • HTML5 Black Book: Covers Css3, Javascript,XML, XHTML, Ajax, PHP And Jquery
  • HTML5 Application Development Fundamentals: MTA Exam 98-375
  • .NET 4.0 Programming 6-In-1, Black Book
  • SQL Server 2008 R2 Black Book
  • Asp.net 4.0 Projects Covers: net 3.5 And .net 4.0 Codes, Black Book
  • UNIX Shell Programming 1 Edition by Yashavant Kanetkar
  • UNIX and Shell Programming 1 Edition by Richard F. Gilberg, Behrouz A. Forouzan
  • Computer Networks by Andrew S. Tanenbaum
  • Multiple Choice questions in computer science by Timothy J Williams