Entonces, en resumen, soy un poco nuevo en la mayor parte de esto. Lo que necesito hacer es hacer un panel de cuatro imágenes diferentes. Ya lo hice, y ahora necesito hacerlo para que cualquier imagen en la que haga clic se convierta en el fondo de la página. Lo siento si lo he explicado mal, pero ¿alguien sabe cómo codificaría esto en javascript? Si pudieras ayudarme, te lo agradecería mucho.
Asigne la fuente de la imagen a la propiedad de imagen de fondo del cuerpo del documento.
// Attach an event listener to the container, and // add a listener to it that calls the `handleClick` function. const images = document.querySelector('.images'); images.addEventListener('click', handleClick, false); // Check to see if the element ciicked on is an // image, and then assign the image src to the // background-image property of the document body function handleClick(e) { if (e.target.matches('img')) { const { src } = e.target; document.body.style.backgroundImage = `url(${src})`; } } body { background-size: cover; background-repeat: no-repeat; } img:hover { cursor: pointer; } <div class="images"> <img src="https://dummyimage.com/75x75/000/fff&text=1" /> <img src="https://dummyimage.com/75x75/575/fff&text=2" /> <img src="https://dummyimage.com/75x75/a8d/fff&text=3" /> <img src="https://dummyimage.com/75x75/bbc/fff&text=4" /> </div>Documentación adicional
Esta no es la mejor solución, pero creo que puede ayudarte.
<html> <body> /*You can make img click able and onclick like button*/ <img src="this is picture path" onclick="function"> <script> /* Function change background*/ function function() { /* Command js and picture path inside 'this' and url with css command inside "this" actually just copy the code, no-repeat right top just a some css setting */ document.body.style.background = "url('img_tree.png') no-repeat right top"; /* You see "body" tag right? It change body background*/ } </script> </body> </html>