This code is reference for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kali</title>
</head>
<style>
.head{
color: blue;
}
.kali{
height: 450px;
width: 680px;
/* display: flex;
justify-content: center;
align-items: center; */
}
.kali_image{
height: 90%;
width: 100%;
/* float: left; */
}
#img{
float: left;
}
.btns{
border-radius: 10%;
/* display: flex;
align-items: center;
justify-content: center; */
height: 20px;
font-weight: bold;
width: 50px;
border: 1px solid black;
color: blue;
padding-top: 30px;
}
.btns:hover{
background-color: blue;
color: white;
}
</style>
<body>
<div class="kali">
<h2 class="head">Kali Linux</h2>
<div class="kali_image">
<img src="/kali.jpg" alt="img" id="pic">
</div>
</div>
<div class="btn">
<button onclick="changeImage()" id="btns">Change Image</button>
</div>
</body>
<script>
function changeImage(){
const image = document.getElementById("pic");
img.src = "new.image.png";
}
</script>
</html>
Result
0 Comments