LESSON 10 – NEW EVENS (SIMPLE
ANIMATION)
WHAT DO YOU MEAN BY ANIMATION
We are
talking about switching one image for another when certain mouse events
occur. You have certainly seen this
with buttons on websites that change colours when you put the cursor over them.
This is
what we will learn to do.
EXAMPLE 1 - DEMO
We’ll
start off with an example to show what can be done.
onClick
- Click here to see an onClick event.
onMouseOver
– Click here to see an onMouseOver event.
USING THE ID ATTRIBUTE
You
should get used to using the id attribute in elements that you want to access
through javascript. For now, we will
use it in img tags.
<img src="filename.jpg"
id="but01">
USING ID IN JAVASCRIPT
We can
then change the image’s attributes in javascript by using the following code:
document.getElementById("idName").attribute =
value;
Example code
For example, we can change the src for the image with id
name "img1" by using the following:
document.getElementById("img1").src =
"newFilename.jpg";
Example code 2
We can also change the border of the
image with id name "coco" by using the following:
document.getElementById("coco").border =
"5";
EVENTS - onClick
We have
already seen how to use the onClick event.
However, we have only used it for buttons that are inside forms. In reality, we can also place onClick events
and code inside other elements such as images.
Example code
The following image will run the
function fun() when it is clicked.
<img
src="lightsaber.jpg" id="img2"
onClick="fun()">
EXAMPLE 2 – IMAGE CLICK CHANGES IT’S BORDER
Here is
the code:
<html>
<head>
<script type="text/javascript">
function clicked()
{
document.getElementById("zz").border ="5";
}
</script>
</head>
<body>
<img src="headbutt.jpg" id="zz"
onClick="clicked()"><br>
Click the image to add a border.
</body>
</html>
Click here to see this in action.
EVENT – onMouseOver
We can
also trigger an event when the mouse goes over an object. We simply add the following inside the
object’s tag:
onMouseOver="functionName()"
EXAMPLE 3 – MOUSEOVER CHANGES IMAGE
The
function in the following code changes the image’s src. The function is called with the mouse goes
over the image.
<html>
<head>
<script type="text/javascript">
function mo()
{
document.getElementById("cb").src
="barney.jpg";
}
</script>
</head>
<body>
This webpage has special abilities. <br><br>
Put your cursor over the crystal ball to see what you are thinking
about.<br>
<img src="crystalBall.jpg" id="cb"
onMouseOver="mo()"><br>
</body>
</html>
Click here to see this in action.
EVENT – onMouseOut
We can
trigger an event when the mouse cursor goes outside the image. To do this, we simply add the following
inside the object’s tag:
onMouseOut="functionName()"
EXAMPLE 4 – onMouseOver, onMouseOut & onClick
The
following changes the image when the mouse goes on or leaves the image. It also changes when the mouse is clicked on
the image.
<html>
<head>
<script type="text/javascript">
function mover()
{
document.getElementById("cb").src
="buttonBrightBlue.png";
}
function mout()
{
document.getElementById("cb").src
="buttonBlue.png";
}
function clicked()
{
document.getElementById("cb").src
="buttonRed.png";
}
</script>
</head>
<body>
<img src="buttonBlue.png" id="cb"
onMouseOver="mover()" onMouseOut="mout()"
onClick="clicked()"><br>
</body>
</html>
Click here to see this in action.