Code to display images in JS and change images dynamically.
<html>
<head>
<title></title>
<script>
var ctr=0;
function changeImage()
{
var x=document.getElementById("myimage1");
if(ctr==0)
{
x.src="image2.jpg";
ctr=1;
}
else
{
x.src="image1.jpg";
ctr=0;
}
}//end of function
function changeImages()
{
var x=document.getElementsByTagName("img");
// alert(x.length);
for(i=0;i<x.length;i++)
{
x[i].src="image1.jpg";
x[i].style.borderRadius="10px";
}
}//end of function
</script>
</head>
<body>
<div style="background-color: blue;width: 400px;height: 500px;">
<img src="image1.jpg" id="myimage1" onmouseout="changeImage()" style="width: 300px; height: 250px;"><br>
<input type="button" value="Change Image" onclick="changeImage()" >
<h1>this is heading two</h1>
<img src="image1.jpg" id="myimage1" onmouseout="changeImage()" style="width: 300px; height: 250px;"><br>
<h2>now this is another image</h2>
<img src="image1.jpg" id="myimage1" onmouseout="changeImage()" style="width: 300px; height: 250px;"><br>
<h2>this is next image</h2>
<img src="image1.jpg" id="myimage1" onmouseout="changeImage()" style="width: 300px; height: 250px;"><br>
<input type="button" value="Change Images" onclick="changeImages()" >
<img src="image1.jpg" id="myimage1" onmouseout="changeImage()" style="width: 300px; height: 250px;"><br>
<img src="image1.jpg" id="myimage1" onmouseout="changeImage()" style="width: 300px; height: 250px;"><br>
</div>
</body>
</html>
Comments
Post a Comment