View video tutorial
HTML Embedded Elements
HTML
Embedded content is the outside resources into the document.
HTML Embedded elements
Embedded content is content that imports other resources into the document.
Some embedded content elements may contain fallback content that will be used when external resources cannot be used or will be unavailable.
Embedded elements are
<audio>,
<canvas>,
<embed>,
<iframe>,
<img>,
,
<object>,
<picture>,
<svg>,
<video>.
Example <img> zoom
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
<title>HTML img zoom example</title>
<style>
#myImg1,
#myImg2 {
cursor: pointer;
border: 1px solid #d2d2d2;
margin: 10px;
}
/* Modal background */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
padding-top: 100px;
}
/* Enlarge modal image */
.mymodalcontent {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
animation-name: zoom;
animation-duration: 0.7s;
}
/* Animation for modal window */
@keyframes zoom {
from {
transform: scale(0.1)
}
to {
transform: scale(1)
}
}
/* Close button*/
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<p>Click on the to zoom in</p>
<img id="myImg1" src="resources/images/flower-gardenia.png" style="width:auto;" alt="flower-gardenia" />
<img id="myImg2" src="resources/images/flower-hibiscus.png" style="width:auto;" alt="flower-hibiscus">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="mymodalcontent" id="mymodalimg">
<div id="caption"></div>
</div>
<script>
let element = document.querySelector("#para1");
function myfunc() {
if (element.style.fontWeight === "bold") {
element.style.fontWeight = "normal";
} else {
element.style.fontWeight = "bold";
}
}
var modal = document.getElementById("myModal");
var myimg1 = document.getElementById("myImg1");
var myimg2 = document.getElementById("myImg2");
var modalImg = document.getElementById("mymodalimg");
var captionText = document.getElementById("caption");
myimg1.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
myimg2.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
}
</script>
</body>
</html>
Copy code and click on the "Try it Now" button to see how it works.