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
What does the isNaN() function?
What does 3 dots mean in javascript?
How to create scale in P info
How to convert “20” to number in javascript?
What are the different types of errors available in javascript?
Explain escape() in javascript?
How about 3+5+"8"?
How many hours learn javascript?
What is unescape() function?
Do you need to declare variables in javascript?
Can you pass a anonymous function as an argument to another function?
What are the advantages of using JavaScript?
What is the difference between HTMLCollection and NodeList?
Should you disable javascript?
What would be the result of 3+2+”7″?
