Interested to Buy Any Domain ? << Click Here >> for more details...
Answer Posted / fathimath thasneem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maximize Image Example</title>
<style>
.full-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 9999;
}
#myImage {
width: 50%; /* Initially set to 50% of the container width */
cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
}
</style>
</head>
<body>
<img id="myImage" src="path_to_your_image.jpg" alt="Click to maximize">
<script>
const img = document.getElementById('myImage');
img.addEventListener('click', function() {
// Check if the image already has the full-screen class
if (img.classList.contains('full-screen')) {
img.classList.remove('full-screen'); // If yes, remove it (minimize)
} else {
img.classList.add('full-screen'); // Otherwise, add it (maximize)
}
});
</script>
</body>
</html>
| Is This Answer Correct ? | 0 Yes | 0 No |
Post New Answer View All Answers
Explain the for-in loop?
What creates scope in javascript?
How do we get javascript onto a web page?
What does it mean in javascript?
Where are cookies actually stored on the hard disk?
What is callback?
Does javascript have the concept level scope?
Why javascript is fast?
What are the different types of errors supported by javascript?
How you can modify XAML content from JavaScript in Silverlight?
Where do I write javascript code?
Does javascript support automatic type conversion?
How do I open javascript?
What is meant by vanilla javascript?
What can I build with javascript?
