JavaScript tutorial-rollable images


Rollable images

In this example, you will learn to create  rollable over images using JavaScript code. When you move the mouse pointer over an image, the image will switches to another image. The process of switching between the two images(roll1.png and roll2.png) is always done by calling the roll() function when the mouse pointer moves over them. The roll() function needs to be set as the value of the event attribute onmouseover of <img> tag to make it called when the mouse is moved over the images.

 

<html>
<head>
<title>JavaScript rollable images</title>
<script language="JavaScript" type="text/javascript">
var i=0;

function roll()
{
if(i==0){
document.getElementById("rollimage").src="roll1.png";
i=1;}
else {
document.getElementById("rollimage").src="roll2.png";
i=0;}
}




</script>
</head>
<body onload="roll()">
<img id="rollimage" onmouseover="roll()"></img>
</body>
</html>





Comments




This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.