changing an image based on checking checkbox using HTML & JavaScript, Please put div blocks

changing an image based on checking checkbox using HTML & JavaScript, Please put div blocks

Hello, PLease check the below code, and let me know the error. The answer should be like this - It has to display Desert.jpg once check box unselected, display Tulips.jpg when check box selected.

Please help me asap..

<!DOCTYPE html>
<html>

<br><br>

<script type="text/javascript"> 

function showImage()
    {

            if(document.getElementById('check').checked==true)
            {
            document.getElementById("image").style.visibility = 'visible'; 
            }
            else if(document.getElementById('check').checked==false)
            {
            document.getElementById("image").style.visibility = 'hidden'; 
            }

    }
</script>



<div align="left" class="checkbox-content-small">
    <div align="left" class="jive-checkbox">
        <div align="left" class="jive-rendered-content-checkbox">
            <h3 style="text-align: left; color: #286da1; padding-top: 0px;">By checking checkbox, Image gets displayed</h3>

            <body onload="showImage()">
                <font align="left">
                <input type="checkbox" id="check" onclick="showImage()" />
                Show Image

            <div class="checkboxes">
                <img id = "image" class = "jive-image" height="125" src ="Tulips.jpg "  style="display: block;  width="210">
            </div>

            <div class="checkboxes">
                <img id="image" class = "jive-image" height="125" src="Desert.jpg" style="display: block;  width="210" >
            </div>
        </div>
    </div>
</div>
</html>
View Answers

Ads









Related Tutorials/Questions & Answers:
changing an image based on checking checkbox using HTML & JavaScript, Please put div blocks
changing an image based on checking checkbox using HTML & JavaScript, Please put div blocks   Hello, PLease check the below code, and let me know...;By checking checkbox, Image gets displayed</h3> <body onload
Changing background color using JavaScript
Changing background color using JavaScript  Hi Sir Is there any way to change the background color using JavaScript ? Please mention code with your answer.   Hello Friend Pass the element & color in the given
Advertisements
Hide show HTML forms using javascript
Hide show HTML forms using javascript  How to hide a HTML form in my application using JavaScript?   HTML Code to create checkbox <...;div id="yourDiv"> ...other forms... </div> JavaScript function to hide
How to add background image to div using CSS?
How to add background image to div using CSS
JavaScript Checkbox getElementById
() for checkbox in JavaScript. In the given example we are going to show an image on clicking the checkbox. This is done by using the JavaScript method getElementById... JavaScript Checkbox getElementById
How to put an image on a JButton?
How to put an image on a JButton?  How to put an image on a JButton
how to print HTML using javascript or Jquery
how to print HTML using javascript or Jquery  is there any way to print a document(created using Html and javascript) without using window.print, which works for all the browser specially chrome and firefox, I have used
Html form using JavaScript to display the table content
Html form using JavaScript to display the table content  HI There, Greetings, I am new to this java and I need your assistance. I have created... want to write a Html JavaScript coding to display the content from database
JavaScript Hide Div
; In this section, we are going to hide div element on clicking the button using the JavaScript. In the given example, we have created a div element using <div>... JavaScript Hide Div
how to put php in javascript
how to put php in javascript  How to write a javascript code inside php block
div background color in html
div background color in html   How to change the background color of DIV in HTML
image on div or cell of table
image on div or cell of table  I am using ms access database and I have stored the image in access database and I have a code to display image but it display on browser but I want to display on inside the div tag or table tag pls
image on div or cell of table
image on div or cell of table  I am using ms access database and I have stored the image in access database and I have a code to display image but it display on browser but I want to display on inside the div tag or table tag pls
image on div or cell of table
image on div or cell of table  I am using ms access database and I have stored the image in access database and I have a code to display image but it display on browser but I want to display on inside the div tag or table tag pls
image on div or cell of table
image on div or cell of table  I am using ms access database and I have stored the image in access database and I have a code to display image but it display on browser but I want to display on inside the div tag or table tag pls
image on div or cell of table
image on div or cell of table  I am using ms access database and I have stored the image in access database and I have a code to display image but it display on browser but I want to display on inside the div tag or table tag pls
image on div or cell of table
image on div or cell of table  I am using ms access database and I have stored the image in access database and I have a code to display image but it display on browser but I want to display on inside the div tag or table tag pls
enable disable checkbox in javascript
enable disable checkbox in javascript  How to enable disable checkbox in javascript
JavaScript move div
JavaScript move div...; This section illustrates you how to move a div element on the window using JavaScript. In the following code, we have defined a div element consisting of text
how to validate the telephone number without using jquery in html with javascript
how to validate the telephone number without using jquery in html with javascript  how to validate the telephone number without using jquery in html with javascript
HTML div tag
HTML div tag  I have created a webpage using the div tag. The webpage has the header and the footer. the middle area is divided into left and right parts. The left side has a list of link. The right side part basically shows
HTML div tag
HTML div tag  I have created a webpage using the div tag. The webpage has the header and the footer. the middle area is divided into left and right parts. The left side has a list of link. The right side part basically shows
HTML div tag
HTML div tag  I have created a webpage using the div tag. The webpage has the header and the footer. the middle area is divided into left and right parts. The left side has a list of link. The right side part basically shows
HTML div tag
HTML div tag  I have created a webpage using the div tag. The webpage has the header and the footer. the middle area is divided into left and right parts. The left side has a list of link. The right side part basically shows
Accessing MS ACCESS databse using a HTML webpage [created using Javascript]
Accessing MS ACCESS databse using a HTML webpage [created using Javascript]  HI team, This is Srinivas, and I have a query and i explained here... I have to save some datas in an MS ACCESS database file [*.mdb], after
Store image from html img tag into mysql db using java
Store image from html img tag into mysql db using java  Hi. How to get the image displayed in the < img > tag of HTML and store it in the mysql database using java? Thanks in advance
JavaScript hide image
; In this section, we are going to show and hide image on clicking the button using the JavaScript. In the given example, we have defined an image using <img>... JavaScript hide image
working of a div tag in html
working of a div tag in html   !DOCTYPE html PUBLIC "-//W3C//DTD....dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
How to animate div with jQuery and JavaScript?
;html> <head> <title>How to animate div with jQuery and JavaScript.... In this tutorial we have learned to animate a div and add maximize effect using jQuery...Adding maximize effect to a div: How to animate div with jQuery
How to animate div with jQuery and JavaScript?
;html> <head> <title>How to animate div with jQuery and JavaScript.... In this tutorial we have learned to animate a div and add maximize effect using jQuery...Adding maximize effect to a div: How to animate div with jQuery
coding for horizontal menubar using using html or javascript - JSP-Servlet
coding for horizontal menubar using using html or javascript  hii friends, i wanted to implement horizontal menubar in my project tht wil open the links to diffrnt pages kindly help

Ads