Monday, 7 October 2013
I displayed an image using img tag on a html page. src is the attribute used to add source for img tag. My image is placed in a folder named as images so i used the below format.
ImgSideBar is the image id which is used to access the properties of image tag using javascript code.
HTML Code for image tag displaying image
ImgSideBar is the image id which is used to access the properties of image tag using javascript code.
HTML Code for image tag displaying image
<img id="ImgSideBar" src="images/KrrishSideBar.png" />
Now when the webpage is opened in the browser it will display image named KrrishSideBar in the image control.
No on a button click i want to display other image named as KrrishSideBar2 in the same image control for that i used the below javascript code inside a javascript function which is called using button click event.
Now when the webpage is opened in the browser it will display image named KrrishSideBar in the image control.
No on a button click i want to display other image named as KrrishSideBar2 in the same image control for that i used the below javascript code inside a javascript function which is called using button click event.
Javascript code to change image on button click
function f1(){
document.getElementById("ImgSideBar").src = "images/Krissh/KrrishSideBar2.png";
}
Example code
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("pic1"))
{
element.src="pic1.gif";
}
else
{
element.src="pic2.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="pic1.gif" width="100" height="180">
<p>Click on image to change</p>
</body>
</html>
Example code
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("pic1"))
{
element.src="pic1.gif";
}
else
{
element.src="pic2.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="pic1.gif" width="100" height="180">
<p>Click on image to change</p>
</body>
</html>
