shaking image
Shaking an image is another great effect. We just alter its position by a set amount and keep doing it in increments of milliseconds that you dictate. The amount the image shakes is also entirely up to you and is stated as a value along the X axis or X axis, or both.
We use the getElementById() method to access the image position. We then alter it and trigger the reposition with an onMouseOver event. An onMouseOut event is used to stop the shaking. Or you can leave the image shaking, it’s entirely up to you.
<html>
<head>
<script type="text/javascript">
function shakeleft() {
document.getElementById('image').style.position="relative";
document.getElementById('image').style.left="3";
timer=setTimeout("shakeright()",10);
}
function shakeright() {
document.getElementById('image').style.left="0";
timer=setTimeout("shakeleft()",10);
}
function stoptimer() {
clearTimeout(timer);
}
</script>
</head>
<body>
<img id="image" src="smiley.gif" onmouseover="shakeleft()" onmouseout="stoptimer>
</body>
</html>
If the image isn’t shaking far enough to the left or right, increase the amount of the style.left attribute. If it isn’t shaking fast enough decrease the time for each position.
|
