Overlapping Images from Array - Javascript
Question
I am trying to make a planner that allows you to select a wallpaper by season. Currently I'm working on fall and if you click on fall, you can see all of the alerts are different (each url from my array is shown). But, when those alerts go away, I see only one wallpaper. I want all of the wallpapers to show up when fall is clicked on not just one (so user can see all options). I want them to be in a grid view (similar to a photo gallery on iPhones but have the images a little spread out). I'm confused on what I'm doing wrong because the alerts show all url's so I'm not sure if they images are over top of each other. I tried adding margin but that didn't work either.
Here is my code:
<html> <head> <link href="https://fonts.googleapis.com/css2?family=Marvel&display=swap" rel="stylesheet"> </head> <body> <header>PLANNER</header> <div id="menu"> <button id="fall" onclick="seasonFall()">FALL</button> <button id="spring" onclick="seasonSpring()">SPRING</button> <button id="summer" onclick="seasonSummer()">SUMMER</button> <button id="winter" onclick="seasonWinter()">WINTER</button> <button id="lock" onclick="defaultButton()">DEFAULT WALLPAPER</button> </div> <script> var fall = [ "https://images.pexels.com/photos/3216349/pexels-photo-3216349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "https://images.pexels.com/photos/589840/pexels-photo-589840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" ]; function seasonFall() { for (var i = 0; i < fall.length; i++) { var test = document.createElement('div'); test.id = "test"; test.innerHTML = document.body.style.backgroundImage = "url('" + fall[i] + "')"; document.body.style.backgroundPosition = "center center"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundSize = "300px 300px"; document.body.style.margin = "30px"; alert(test.innerHTML); } } function defaultButton() { document.body.style.backgroundImage = "url('https://images.pexels.com/photos/3689659/pexels-photo-3689659.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')"; document.body.style.backgroundPosition = "center center"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundSize = "cover"; } </script> <style> /* PLANNER HEADER AT TOP */ header { font-family: 'Marvel', sans-serif; text-align: center; font-size: 100px; margin: 0px; } /* WALLPAPER MENU */ #menu { font-family: 'Marvel', sans-serif; text-align: center; background-color: rgba(255, 255, 255, 0.6); font-size: 100px; float: left; height: 100%; margin: 0px; grid-area: menu; } /* SEASON BUTTONS */ button { font-size: 16px; text-align: center; font-family: 'Marvel', sans-serif; font-weight: bold; height: 25px; display: block; margin: 20px; width: 160px; } </style> </body> </html>
I found similar questions but they used other languages:
1 answers
solution1
1 ACCPTED 2020-08-02 14:14:33
The problem is that you are overwriting the background image of the document body in every iteration in the method seasonFall .
Please, try something like this:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Marvel&display=swap" rel="stylesheet">
</head>
<body>
<header>PLANNER</header>
<div id="menu">
<button id="fall" onclick="seasonFall()">FALL</button>
<button id="spring" onclick="seasonSpring()">SPRING</button>
<button id="summer" onclick="seasonSummer()">SUMMER</button>
<button id="winter" onclick="seasonWinter()">WINTER</button>
<button id="lock" onclick="defaultButton()">DEFAULT WALLPAPER</button>
</div>
<div id="wrapper">
</div>
<script>
var fall = [
"https://images.pexels.com/photos/3216349/pexels-photo-3216349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/589840/pexels-photo-589840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
];
function seasonFall() {
for (var i = 0; i < fall.length; i++) {
// Please, excuse the code, is just for give you the idea
// Ideally you must use CSS to set as much of these properties as
// you can once you have a clear idea of how to organize your grid
var test = document.createElement('div');
test.id = "test" + i;
test.style.backgroundImage = "url('" + fall[i] + "')";
test.style.backgroundPosition = "center center";
test.style.backgroundRepeat = "no-repeat";
test.style.backgroundSize = "300px 300px";
test.style.margin = "30px";
test.style.width = "300px";
test.style.height = "300px";
wrapper.appendChild(test);
}
}
function defaultButton() {
document.body.style.backgroundImage = "url('https://images.pexels.com/photos/3689659/pexels-photo-3689659.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')";
document.body.style.backgroundPosition = "center center";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "cover";
}
</script>
<style>
/* PLANNER HEADER AT TOP */
header {
font-family: 'Marvel', sans-serif;
text-align: center;
font-size: 100px;
margin: 0px;
}
/* WALLPAPER MENU */
#menu {
font-family: 'Marvel', sans-serif;
text-align: center;
background-color: rgba(255, 255, 255, 0.6);
font-size: 100px;
float: left;
height: 100%;
margin: 0px;
grid-area: menu;
}
/* SEASON BUTTONS */
button {
font-size: 16px;
text-align: center;
font-family: 'Marvel', sans-serif;
font-weight: bold;
height: 25px;
display: block;
margin: 20px;
width: 160px;
}
#wrapper {
margin-left: 200px;
}
</style>
</body>
</html>
The idea is create a series of div elements and set the background properties of them.
You can organize these divs in a grid with the number of columns and rows that you consider appropriate, for instance, just including further loops in the seasonFall method and adjusting the margin and position of them.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.