Learning Point :- This program basically tells that how we can change the
HTML data using JavaScript.....
------------------------------------------------------------------------------------
<html>
<head>
</head>
<body>
<img id="myimage" src="off.jpg" height="150" width="100" onclick="myFunction()">
<script>
var myVar=setInterval(function(){myFunction()},300);
function myFunction()
{
var image=document.getElementById('myimage');
if(image.src.match("off.jpg"))
{
image.src="on.jpg";
}
else
{
image.src="off.jpg";
}
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------
output:-
This will result in a bulb which is continuously switching on and off in every 300 ms(or 0.3 sec)
---------------------------------------------------------------------------------------------
Note:-You should download 2 images of a bulb from google
1.)Image for off state (saved it with name off.png/jpg)
2.)Image for on state (saved it with name on.png/jpg)
---------------------------------------------------------------------------------------
HTML data using JavaScript.....
------------------------------------------------------------------------------------
<html>
<head>
</head>
<body>
<img id="myimage" src="off.jpg" height="150" width="100" onclick="myFunction()">
<script>
var myVar=setInterval(function(){myFunction()},300);
function myFunction()
{
var image=document.getElementById('myimage');
if(image.src.match("off.jpg"))
{
image.src="on.jpg";
}
else
{
image.src="off.jpg";
}
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------
output:-
This will result in a bulb which is continuously switching on and off in every 300 ms(or 0.3 sec)
---------------------------------------------------------------------------------------------
Note:-You should download 2 images of a bulb from google
1.)Image for off state (saved it with name off.png/jpg)
2.)Image for on state (saved it with name on.png/jpg)
---------------------------------------------------------------------------------------
No comments:
Post a Comment