Salve a tutti... Volevo chiedervi se c'è un modo per cambiare colore ad un oggetto cliccando su un bottone. Per esempio un quadrato che cambia colore da verde a rosso (e viceversa).
Salve a tutti... Volevo chiedervi se c'è un modo per cambiare colore ad un oggetto cliccando su un bottone. Per esempio un quadrato che cambia colore da verde a rosso (e viceversa).
sposto in JS
intanto ti faccio una domanda che ti aiuta a chiarire la richiesta:
quindi deve cambiare prima da verde a rosso e, riclikcando, da rosso a verde?
Si. Scusate per la sezione sbagliataOriginariamente inviata da Vincent.Zeno
Nessuno sa come fare?
Con jQuery https://www.w3schools.com/jquery/html_toggleclass.asp
Cavicchi Andrea
Problemi con javascript, jquery, ajax clicca qui
Cube.png è un'immagine vuota... Ho provato a inserire direttamente l'immagine del cubo verde, ma poi non cambiava colore
EDIT: Il cubo verde ora si vede, avevo messo due ## prima del colorePerò adesso quando premo il bottone invece che cambiare il colore del cubo, quest'ultimo si sposta e al suo posto appare il cubo rosso.
Ultima modifica di Lucafarnese; 17-11-2017 a 19:25
Sono riuscito a far apparire un cubo rosso premendo un bottone, ma prima di premerlo non c'è il cubo verde. Come posso fare?
codice:<html><head> <title>Pizzeria Il Fornaio</title> <style> body{font-family: sans-serif; background-color: #FFEBCD; background-image: url(sfondo3.png); background-position: center; background-repeat: no-repeat;} nav{z-index:2; background: #000; height: 52px; width: 100%; position: fixed; top: 0; left: 0;} nav ul{list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1200px;} nav ul ul{display: none; position: absolute; top: 100%; left: 0; width: 100%;} nav ul li{position: relative; float: left; width: 25%; text-align: center;} nav ul li:hover ul{display: block;} nav ul li li{position: relative; float: none; width: 100%; border: none;} nav ul li a{ display: block; text-decoration: none; color: #ffffff; padding: 15px 25px; font-size: 1.2em; box-sizing: border-box; border-right: solid 2px #000; border-left: solid 2px #000;} nav ul ul li a{font-size: 1rem; border-bottom: solid 2px #000;} nav ul ul li:first-child a{border-top: solid 2px #000;} nav ul li:hover a{background: #FFF; color: #000; text-decoration: none; transition: 0.5s;} nav ul li li:hover a{background: #000; color: #FFF;} .red { background: #ff0000; margin-right: 100px; margin-top: 200px; width: 100px; height: 100px; } .green { background: ##00FF00; margin-right: 100px; margin-top: 200px; width: 100px; height: 100px; } </style> </head> <body> <header> <nav> <ul> <li><a href="Homepage.html">HOME</a></li> <li><a href="Chisiamo.html">CHI SIAMO</a> <ul> <li><a href="Dovesiamo.html">DOVE SIAMO</a></li> </ul> </li> <li><a href="Menu.html">MENU'</a> </li> <li><a href="Prenotazioni.html">PRENOTAZIONI</a></li> </ul> </nav> </header> <p>Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p> <button onclick="myFunction()">Try it</button> <div id="myDIV"> <img src="cube.png" class="green"> </div> <script> function myFunction() { var element = document.getElementById("myDIV"); element.classList.toggle("red"); } </script> </body> </html>
Ci sto provando in tutti i modi, ma non riesco. Il cubo verde, invece che diventare rosso, si sposta e al posto suo esce il cubo rosso. Qualcuno potrebbe farmi vedere come fare?
ma devi sostituire il contenuto (cambiare l'immagine "cubo") o vuoi cambiare il colore di fondo del div?
lo chiedo perché eri partito col "cambiare colore ad un oggetto", ed ora vuoi cambiare un contenuto...
Vorrei cambiare il colore di quel quadrato che sia un'immagine o il fondo del div va bene qualsiasi cosa ahahah
Ultima modifica di Lucafarnese; 17-11-2017 a 22:15
Permessi di invio
Rispondi quotando