Customize the background based on the user's choice

Hello, I'm interested in having 5 different backgrounds for users to choose from. I want them to be able to click on a thumbnail and have the site's background change dynamically. Could you please advise me on how to achieve this? Thank you for any assistance.

Answer №1

Understanding the basics of html and javascript is essential before attempting this task. To begin, you need to create an html structure similar to the following:

 <div class="container" data-image="image1.jpg"></div>
 <div class="container" data-image="image2.jpg"></div>
 <div class="container" data-image="image3.jpg"></div>
 <div class="container" data-image="image4.jpg"></div>
 <div class="container" data-image="image5.jpg"></div>

A sample CSS code to style these containers:

 .container {
     width: 50px;
     height: 50px;
     border: 1px solid black;
     background-color: blue;
 }

The necessary javascript code:

 var elements = document.getElementsByClassName("container"); // retrieve all elements
 for(var i in elements) { // iterate through them
     elements[i].click(function(e) { // handle click event
          document.getElementsByTagName("body")[0].style.backgroundImage = this.dataset().image; // update background image
     });
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to alter the color of the weekday header in the Date picker calendar?

I'm working on enhancing the accessibility of my website by changing the default blue color of the weekdays header (highlighted area in the screenshot). I've attempted to modify the CSS code below, but no matter which color code I use, I can&apos ...

Modify the sticky menu color upon scrolling

While working on a client's website, I've stumbled upon an issue that has left me scratching my head. I'm looking to modify the color of the sticky menu once it's scrolled. Can anyone assist me in creating a custom CSS code to implemen ...

Having trouble clicking on SubMenu with selenium web driver

Currently, I am looking into automating a UI application. In this application, there is a menu that displays sub-menus upon hovering the mouse over it. However, I am facing an issue where I am unable to click on the items within the sub-menu. Here is the ...

The updated values in an Angular application may not always be accurately represented by interpolated values

The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...

Is there a way I can detect a browser timeout and display a custom error message?

My webpage in classic asp contains a link to a local IP address, shown below: <a href="http://192.168.1.89">Link</a> When the local IP address is not available, the web browser eventually times out and shows its own error message. I ...

Unable to load variables into site.css in order for Flask app to successfully render home.html

I'm encountering difficulties in getting my site.css file to accept two variables passed in from my app.py using Jinja2 templates, namely {{ variable }}. In app.py, I have defined two variables named empty_fill_line and fill_line, which dynamically up ...

Adjusting background size using jQuery as the window is resized

Exploring ways to dynamically resize the background image of my website based on the current window dimensions using jQuery. At the moment, I have tried the following approach: $(window).resize(function() { $("body").css({"background ...

Ways to monitor and measure clicks effectively

Within my website, I have a table element with one column and numerous rows. Each row serves as a hyperlink to an external shared drive. <tr><td ><a href="file://xxx">Staff1</a></td></tr> <tr ><td ><a h ...

How to create nested nav menus that are optimized for touch-screen devices?

When it comes to creating responsive websites, one challenge I frequently encounter is designing a multi-level nav menu that functions effectively for touch devices. Many plugins and methods exist, but most fall short because they do not allow a second-l ...

Necessary CSS selector input equivalent in Reactive Forms

Is there a similar CSS method like input:required {CSS} to style all the reactive form fields in Angular that are set as required using Validators.required in their formControl? Or is there another approach to achieve this with CSS? ...

Fixed background & cover design for Internet Explorer 11

Visit this link for more information: http://apolytos.com/new/img/test.html <!doctype html> <html> <head> <meta charset="utf-8"> <style> body { background:url("background.jpg"); background-repeat:no-repeat; backgr ...

It is not possible to alter or manipulate dynamic content received from an Ajax/JSON response when creating a dynamic PHP form

I am in need of a dynamic form that functions as follows: Upon clicking the "ADD" button, a new <div> element should appear for selecting a package. Based on the selected package, the row should change its color by adding or removing certain classe ...

Changing or toggling the visibility of links once the week is finished

I have a total of 4 links available, but I want to display only one link at a time, highlighting a different lunch option every week. Once all 4 weeks have passed, the first lunch menu will be shown again, starting from Monday. <div class="wrapper& ...

Calculate the total value of an object using Typescript

Here is the data that I have: [Products, Products, Products, Products] 0: Products {product_id: "1", Product_type_id: "11", Subtotal:450, …} 1: Products {product_id: "2", Product_type_id: "22", Subtotal:550, …} 2: Products {product_id: ...

The offcanvas menu in the NextJS Tailwind website does not handle hover or tap events properly when outside of the parent dimensions

My header includes an off-canvas menu that slides in from the right side. Everything seems to be working fine, except for one issue: when the menu is open and visible, the mouse and touch events pass through it to the content underneath. Check out the cod ...

What exactly does Apple consider as a "user action"?

In the midst of my current web project, I am facing a challenge with initiating video playback after a swipe event. Despite utilizing the HTML5 video player and JavaScript to detect swipes, I have encountered difficulties in achieving this functionality. I ...

What is the most effective way to extract data from HTML that contains mathematical notations and convert it into plain text format?

Using BeautifulSoup to extract text from HTML can be a bit tricky, especially when dealing with math tags. Below is the HTML code snippet that uses math tags to display text: <p> <span class="aps-inline-formula"> <math display="inline" x ...

I am interested in using a loop in Angular to highlight my div element

Enhancing my comprehension regarding the mentioned images. If I don't select anything within the div property, the default style (css) should appear like this, at least when one div is selected. However, the issue arises when unable to select. This ...

Eliminating the glow effect, border, and both vertical and horizontal scrollbars from a textarea

Dealing with the textarea element has been a struggle for me. Despite adding decorations, I am still facing issues with it. The glow and border just won't disappear, which is quite frustrating. Could it be because of the form-control class? When I rem ...

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?

Is there a way for me to achieve this navigation style? https://i.sstatic.net/LSNHL.png Here is the code I am working with currently. https://gist.github.com/anonymous/9c239f1b541aa26d461b I'm facing difficulty replicating the line style. Any sugges ...