HTML Interactive elements
Interactive content is content created specifically for user interaction.
Interactive elements are
<a>,
<audio>,
<button>,
<details>,
<embed>,
<iframe>,
<img>,
<input>,
<label>,
<select>,
<textarea>,
<video>.
Example <img> zoom in zoom out
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>HTML img tag zoom example</title>
<style>
img {
transition: transform 0.25s ease;
/* apply smooth transition */
cursor: zoom-in;
border: 1px solid #d2d2d2;
margin: 10px;
}
img.zoomed {
transform: scale(2);
/* Image size after zoom */
cursor: zoom-out;
}
</style>
</head>
<body>
<p>Click on the image to zoom in and zoom out</p>
<img src="resources/images/flower-rose.png" alt="Rose" onclick="toggleZoom(this)">
<img src="resources/images/flower-marigold.png" alt="Marigold" onclick="toggleZoom(this)">
<img src="resources/images/flower-rose2.png" alt="Rose" onclick="toggleZoom(this)">
<script>
function toggleZoom(imgElement) {
imgElement.classList.toggle('zoomed'); // toogle adds or removes the 'zoomed' class
}
</script>
</body>
</html>
Copy code and click on the "Try it Now" button to see how it works.