How to Change Image Back and Forth Using Javascript
How to Change Image Dynamically when User Scrolls using JavaScript ?
We are going to add the functionality to our web-page so that whenever the user scrolls up or scrolls down on the image, then the image changes. We have used only 3 images but it can easily be expanded for multiple images.
We are keeping the images on top of each other, this makes sure only one image is visible at a time. When we scroll, we decrement the z-coordinate of the current image and increments the z-coordinate of the new image. By doing this the new image overlays the old image and it comes on top of all images and becomes visible.
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!
- HTML Code: It is used to create a basic structure to include images.
html
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title >
Change Image Dynamically
when User Scrolls
</ title >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< b >A Computer Science Portal for Geeks</ b >
< div id = "scroll-image" >
< img src = "CSS.png" class = "test" />
< img src = "html.png" class = "test" />
< img src = "php.png" class = "test" />
</ div >
</ body >
</ html >
- CSS Code: Css is used to desing the structure. The position property is the most important things here. It will make all the images to appear on top of each other.
html
< style >
body {
text-align: center;
}
h1 {
color: green;
}
img {
position: absolute;
left: 300px;
}
</ style >
- Javascript code: In this section we will add JavaScript code to perform the scrolling on the image.
javascript
<script>
window.onload = function () {
var imageIndex = 0;
var images =
document.getElementsByClassName( 'test' );
var isMouseOverImage = false ;
var scrollImages =
document.getElementById( 'scroll-image' );
var x, y;
function noScroll() {
window.scrollTo(x, y);
}
scrollImages.addEventListener(
"mouseenter" , function () {
x = window.pageXOffset;
y = window.pageYOffset;
window.addEventListener( "scroll" , noScroll);
isMouseOverImage = true ;
});
scrollImages.addEventListener(
"mouseleave" , function () {
isMouseOverImage = false ;
window.removeEventListener(
"scroll" , noScroll);
});
scrollImages.addEventListener(
"wheel" , function (e) {
if (isMouseOverImage) {
var nextImageIndex;
if (e.deltaY > 0)
nextImageIndex = (imageIndex + 1)
% images.length;
else
nextImageIndex =
(imageIndex - 1
+ images.length)
% images.length;
images[imageIndex].style.zIndex = "0" ;
images[nextImageIndex].style.zIndex = "1" ;
imageIndex = nextImageIndex;
}
});
}
</script>
Final Solution: In this section we will combine the above three section.
JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" />
<title>
Change image dynamically
when user scrolls
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
img {
position: absolute;
left: 300px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<b>A Computer Science Portal for Geeks</b>
<div id= "scroll-image" >
<img src= "CSS.png" class= "test" />
<img src= "html.png" class= "test" />
<img src= "php.png" class= "test" />
</div>
<script>
window.onload = function () {
var imageIndex = 0;
var images =
document.getElementsByClassName( 'test' );
var isMouseOverImage = false ;
var scrollImages =
document.getElementById( 'scroll-image' );
var x, y;
function noScroll() {
window.scrollTo(x, y);
}
scrollImages.addEventListener(
"mouseenter" , function () {
x = window.pageXOffset;
y = window.pageYOffset;
window.addEventListener( "scroll" , noScroll);
isMouseOverImage = true ;
});
scrollImages.addEventListener(
"mouseleave" , function () {
isMouseOverImage = false ;
window.removeEventListener(
"scroll" , noScroll);
});
scrollImages.addEventListener(
"wheel" , function (e) {
if (isMouseOverImage) {
var nextImageIndex;
if (e.deltaY > 0)
nextImageIndex = (imageIndex + 1)
% images.length;
else
nextImageIndex =
(imageIndex - 1
+ images.length)
% images.length;
images[imageIndex].style.zIndex = "0" ;
images[nextImageIndex].style.zIndex = "1" ;
imageIndex = nextImageIndex;
}
});
}
</script>
</body>
</html>
Output:
Note: The above code will change image only if mouse if over the image.
How to Change Image Back and Forth Using Javascript
Source: https://www.geeksforgeeks.org/how-to-change-image-dynamically-when-user-scrolls-using-javascript/
Post a Comment for "How to Change Image Back and Forth Using Javascript"