Hi, I have problem i don’t have idea on how to put the image in a div with an id of “zooomout” when i click on the picture.
can you help me please how to do this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
.rembull ul{
list-style: none;
}
ul img{
width: 80px;
}
#bodycontainer{
background: #555555;
width: 100%;
height: 100%;
position: absolute;
border: 1px solid blue;
top: 0;
left: 0;
z-index: 10;
opacity: 0.7;
display: none;
}
#zoomout{
position: relative;
left: 300px;
bottom: 300px;
width: 250px;
height: 250px;
border: 1px solid red;
display: none;
z-index: 100px;
}
#pic{
}
</style>
</head>
<body>
<div class="rembull">
<ul id="pic">
<li><img src="image/pic-1.jpg"/></li>
<li><img src="image/pic-2.jpg"/></li>
<li><img src="image/pic-3.jpg"/></li>
<li><img src="image/pic-4.jpg"/></li>
</ul>
<div>
<div id="bodycontainer">
</div>
<div id="zoomout">
</div>
<script>
var pic, items,zoom;
var bodycont;
pic = document.getElementById("pic");
items = pic.getElementsByTagName("li");
console.log(items);
console.log(document.getElementById("pic"));
var i=0;
var itemslen;
pic.addEventListener("click",function(e){
if(e.target.tagName === "IMG")
{
bodycont = document.getElementById("bodycontainer");
zoom = document.getElementById("zoomout");
bodycont.style.display="block";
zoom.style.display="block";
}
});
</script>
</body>
</html>