Hello Guys,
How are you, here Source for try at your own system or mobile,
HTML Source :-
<!DOCTYPE html>
<html>
<head>
<title> Display LayOut Part-2</title>
<link rel="stylesheet" href="DisplayLayOutPart-2.css" >
</head>
<body>
<div class="imgbox" id="img" >Image Box <br/>
<img src="img.jpg" alt="fjords" style="width:100%">
<button onclick="removeElement()"> Click Here to Using NONE</bu\
>
</div>
<div class="imgbox2" > Reset Box <br/>
<img src="img2.jpg" alt="forest" style="width:100%" >
<button onclick="resetElement()"> Reset</button>
<script>
function removeElement()
{
document.getElementById("img").style.display="none";
}
function resetElement()
{
document.getElementById("img").style.display="block";
}
</script>
</body>
</html>
and in CSS :-
body
{
font:absolute;
}
.imgbox
{
float:lef;
text-align:center;
width:500px;
border: 2px dotted gray;
margin:10px;
padding:6px;
}
.imgbox2
{
float: left;
text-align:center;
width:200px;
margin:10px;
padding:6px;
}
.button
{
width:100%;
}
Image Source:-
Comments
Post a Comment