https://www.rakeshmgs.in/search/label/Template
https://www.rakeshmgs.in
Advertisements
RakeshMgs

Design a HTML page to display a picture. The picture should be removed from the screen after a mouse click on the picture.

रविवार, 17 अप्रैल 2022

Question: Design a HTML page to display a picture. The picture should be removed from the screen after a mouse click on the picture.

output preview

  
<!DOCTYPE html>

<html>

<head>

	<title>WD 9.2 (xi)</title>

</head>

<body>

	<div id="im"><img src="image/1.png" style="cursor: pointer;" /></div>

	<script type="text/javascript">

		document.getElementById("im").onclick = function(img) {

 		img.target.style.visibility = 'hidden';

		}

	</script>

</body>

</html>




Output

Another Method to solve this 


<html>
  
    <body>
    
       <img src="image.jpg" id="image" onclick="removeImage()">


    
       <script>
      
        function removeImage() {
        
        // get the image element
        
        var image = document.getElementById("image");
        
        // remove the image from the page

        image.parentNode.removeChild(image);

       }
      </script>
  
    </body>

</html>

Output:

Image par click karke jarur dekhen

इस html कोड में जावास्क्रिप्ट का इस्तेमाल किया गया है जिसमे एक फंक्शन बनाया गया है function(img) नाम से, इसमें जावास्क्रिप्ट के अन्दर css इस्तेमाल किया गया है जिसे JavaScript DOM कहते है इसका पूरा नाम Document Object Model होता है।


Home M2-R5 O Level Design a HTML page to display a picture. The picture should be removed from the screen after a mouse click on the picture.

Admin

Rakesh Kumar

0 Comments

आपको आर्टिकल कैसा लगा? अपनी राय अवश्य दें
Please don't Add spam links,
if you want backlinks from my blog contact me on rakeshmgs.in@gmail.com
Emoticon