In: Computer Science
JavaScript Task
<html> <!--styling the images side by side-->
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
height: 75%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
<body>
<div class="row">
<div class="column">
<!--image 1 is leaves images for first image
image 2 is leaves images for second image
image 1 is leaves images for third image
onmouseover and onmouseout are used for images changing-->
<img src="1.jpg" id="1" onmouseover="bigImg1(this)" onmouseout="normalImg1(this)" style="width:100%;height:100%">
</div>
<div class="column">
<img src="2.jpg" id="2" onmouseover="bigImg2(this)" onmouseout="normalImg2(this)" style="width:100%;height:100%">
</div>
<div class="column">
<img src="3.jpg" id="3" onmouseover="bigImg3(this)" onmouseout="normalImg3(this)" style="width:100%;height:100%">
</div>
</div>
<!--image pumpkin.jpg is pumpkin images for Second image when mouse is on first image
image black.jpg is black cat images for third image when mouse is on second image
image cocky.jpg is cocky images for first,Second image when mouse is on third image
bigImg all functions called when mouse comes over the pictures
normalImg all functions called when mouse moves out of the pictures-->
<script>
function bigImg1() {
document.getElementById("2").src="pumpkin.jpg"
}
function normalImg1(x) {
x.style.height = "100%";
x.style.width = "100%";
document.getElementById("2").src="2.jpg"
}
function bigImg2() {
document.getElementById("3").src="black.jpg"
}
function normalImg2(x) {
x.style.height = "100%";
x.style.width = "100%";
document.getElementById("3").src="3.jpg"
}
function bigImg3() {
document.getElementById("1").src="cocky.jpg"
document.getElementById("2").src="cocky.jpg"
}
function normalImg3(x) {
x.style.height = "100%";
x.style.width = "100%";
document.getElementById("1").src="1.jpg"
document.getElementById("2").src="2.jpg"
document.getElementById("3").src="3.jpg"
}
</script>
</body>
</html>
If you found this answer helpful please give a thumbs up.