JavaScript Beginner Tutorial: JavaScript onClick Image Change

index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript onClick Image Change</title>
<style>
.container {
 padding:30px;
 background:#999999;
 margin:auto;
 text-align:center;
}
.container h3 {
 color:#FFFFFF;
}
</style>
</head>
<body>
<div class="container">
  <h3>Change Image On onClick</h3>
  <img alt="image" src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png" 
            style="height: 300px; width: 300px; margin:auto; padding:20px; background:#333333; text-align:center;" id="imgClickAndChange" onclick="changeImage()"  /> </div>
<script language="javascript">
    function changeImage() {

if (document.getElementById("imgClickAndChange").src == "http://curdweb.com/navin/fullwidthlider.com/images/slider1.png") 
        {
            document.getElementById("imgClickAndChange").src = "http://curdweb.com/navin/fullwidthlider.com/images/slider3.png";
   
        }
        else 
        {
            document.getElementById("imgClickAndChange").src = "http://curdweb.com/navin/fullwidthlider.com/images/slider1.png";
        }
    }
</script>
</body>
</html>

Monday, 11 May 2015

JavaScript onClick Image Change

index.html

No comments:

Post a Comment