hey guys i am new to javascript and i am trying to figure out how to change the background image of my section while hovering the respective texts. currently i want to load 3 different backgrounds but i have issues trying to figure out. below is the code im using .do lmk if u have any suggestions. thanks in advance .
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* custom webkit scrollbar
*/
html {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body {
overflow-x: hidden;
font-family: 'Krona One', sans-serif;
background-color: rgb(0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
.section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
}
h1 {
font-weight: 500;
font-size: 5vw;
text-transform: uppercase;
color: white;
line-height: 100%;
text-align: center;
}
h2 {
font-weight: 500;
font-size: 6vw;
text-transform: uppercase;
-webkit-text-stroke: 1px white;
color: transparent;
}
</style>
</head>
<section class="section">
<h1 id="gold">Gold</h1>
<h2 id="silver">Silver</h2>
<h1 id="blue">Light Blue</h1>
</section>
</body>
</html>You can use the :hover property in CSS to add styles only whenever the mouse is over the specific HTML element; and to add an image you can use the CSS property background: url(URL_HERE);
For example, your gold ID can be set to display a background by creating a specific :hover property as such:
#gold:hover {
background: url(" https://via.placeholder.com/600x200.png/FFFF00/");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* custom webkit scrollbar
*/
html {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body {
overflow-x: hidden;
font-family: 'Krona One', sans-serif;
background-color: rgb(0, 0, 0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
.section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
}
h1 {
font-weight: 500;
font-size: 5vw;
text-transform: uppercase;
color: white;
line-height: 100%;
text-align: center;
}
h2 {
font-weight: 500;
font-size: 6vw;
text-transform: uppercase;
-webkit-text-stroke: 1px white;
color: transparent;
}
#gold:hover {
background: url(" https://via.placeholder.com/600x200.png/FFFF00/");
}
#silver:hover {
background: url(" https://via.placeholder.com/600x200.png/CCCCCC/");
}
#blue:hover {
background: url(" https://via.placeholder.com/600x200.png/0000FF/");
}
</style>
</head>
<body>
<section class="section">
<h1 id="gold">Gold</h1>
<h2 id="silver">Silver</h2>
<h1 id="blue">Light Blue</h1>
</section>
</body>
</html>For every image, you would need to provide a separate class - if you don't want this behaviour, consider using JavaScript instead to dynamically adjust the background image.
First you need to get the element and then you need to set the backgroundImage property to that element like
var goldElement = document.getElementById('gold');
goldElement.addEventListener('mouseover'), (event)=> { `goldElement.style. backgroundImage = "url('path_to_image')" ` }
And change the background to normal when mouse leave.
goldElement.addEventListener('mouseleave', (event)=> { `goldElement.style. backgroundImage = "url('')" ` });
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3d model</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* custom webkit scrollbar
*/
html {
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
body {
margin:0;
padding:0;
overflow-x: hidden;
font-family: 'Krona One', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
}
.section {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
scroll-snap-align: center;
user-select: none;
background-color: rgb(0, 0, 0);
}
h1 {
font-weight: 500;
font-size: 5vw;
text-transform: uppercase;
color: white;
line-height: 100%;
text-align: center;
}
h2 {
font-weight: 500;
font-size: 6vw;
text-transform: uppercase;
-webkit-text-stroke: 1px white;
color: transparent;
}
</style>
</head>
<body>
<section class="section">
<h1 id="gold" onMouseOver="gold()" onMouseOut="leave()">Gold</h1>
<h2 id="silver" onMouseOver="silver()" onMouseOut="leave()">Silver</h2>
<h1 id="blue" onMouseOver="blue()" onMouseOut="leave()">Light Blue</h1>
</section>
<script>
var sect = document.querySelector('section');
function gold(){
sect.style.background = '#FFD700';
}
function silver(){
sect.style.background = '#C0C0C0';
}
function blue(){
sect.style.background = '#ADD8E6';
}
function leave(){
sect.style.background = '#000000';
}
</script>
</body>
</html>If you want to stay on the color just hovered, then remove the leave function from the above code and from the Tags too.