Ho la necessità di nascondere e/o mostrare, all'occorrenza, i livelli di un'immagine. Partendo da un'immagine base che ho, dovrei, al click di un link, ad esempio, mostrare su di essa un'altra immagine oppure nasconderla. Qualcuno potrebbe fornirmi qualche spunto?
~Il nome di una variabile deve riflettere il suo scopo e non il suo tipo di dati, NET Framework.
Chiaramente si può fare in vari modi, in genere per gestire un evento click è necessario l'uso di JavaScript, ma in questo caso si potrebbe anche tentare una soluzione in pure-css.
Dopo qualche prova ho messo su questo snippet:
Chiaramente do per scontato che si tratti di immagini con trasparenza, dal momento che vuoi sovrapporle.codice:<!DOCTYPE HTML> <html lang="it"> <head> <title>Esempio</title> <meta charset="utf-8"> <style> .lavagna{ width: 800px; height: 600px; position: relative; display: inline-block; border: 1px solid #ddd; border-radius: 4px; text-align: center; background: silver; margin-bottom: 30px; } .lavagna>div{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 4px; opacity: 1; transition: .5s .2s; } .lavagna>div>img{ max-width: 100%; max-height: 100%; } .lavagna>input{ display: inline-block; position: relative; top: 100%; width: 30px; height: 20px; background: #48d; border-radius: 3px; border: 1px solid #999; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; cursor: pointer; } .lavagna>input:not(:checked):hover{ background: #9ce; } .lavagna>input:checked~input{ background: #eee; } .lavagna>input:checked~input+div, .lavagna>input:hover~input+div{ visibility: hidden; opacity: 0; } .lavagna>input:not(:checked):hover+div{ visibility: visible; opacity: .5; } </style> </head> <body> <div class="lavagna"> <input type=radio name="livelli" checked> <div><img src="immagine1.png" alt=""></div> <input type=radio name="livelli"> <div><img src="immagine2.png" alt=""></div> <input type=radio name="livelli"> <div><img src="immagine3.png" alt=""></div> <input type=radio name="livelli"> <div><img src="immagine4.png" alt=""></div> </div> </body> </html>
In sostanza c'è un semplice contenitore che ho chiamato "lavagna" (che richiama il concetto di lavagna luminosa, in cui puoi sovrapporre i lucidi); al suo interno andrai ad inserire delle righe formate ciascuna da un radio button e, a segure, un div con all'interno l'elemento <img>. Puoi quindi inserire quante immagini vuoi semplicemente aggiungendo una riga per ogni immagine da visualizzare.
Il sistema utilizza i radio button per poter visualizzare tutta la serie di immagini dalla prima a quella relativa al livello selezionato.
Il primo radio di norma dovrà essere impostato con l'attributo checked, che fa in modo di mostrare il primo livello all'apertura della pagina. Charamente si può impostare qualunque altro livello come checked; se nessun radio è impostato come checked, tutti i livelli saranno visibili all'apertura della pagina, come se fosse selezionato l'ultimo della serie.
Per selezionare un livello sulla pagina basta cliccare nei radio button, visibili come rettangolini colorati sotto la lavagna.
Tutti i radio da sinistra fino a quello selezionato, saranno evidenziati in blu, e le relative immagini saranno quindi visibili.
Ho inoltre prevvisto una ulteriore funzionalità per mostrare l'immagine in semi-trasparenza quando si passa semplicemente (senza cliccare) sul relativo radio, così da avere una "anteprima" del livello prima di selezionarlo.
Per il contenitore principale #lavagna sono impostate delle dimensioni fisse (all'inizio del css); è possibile chiaramente modificarne i valori a proprio piacimento, tenendo però presente che le immagini sono impostate per essere sempre contenute nei limiti di quelle stesse dimensioni impostate per la lavagna e centrate automaticamente all'interno di essa.
Vedi se può andarti bene, fai sapere.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Sei stato gentilissimo. Il grigio sotto e sopra all'immagine che vedo, come posso toglierlo? Vorrei far si che le immagini occupassero l'intera lavagna, sia in larghezza che in altezza.
Ultima modifica di dwb; 27-03-2019 a 13:23
~Il nome di una variabile deve riflettere il suo scopo e non il suo tipo di dati, NET Framework.
Sei stato gentilissimo.
Puoi modificare il colore del background specificato per la classe .lavagna, oppure se intendi lasciarlo trasparente (valore di default) puoi rimuovere la relativa regola dove ora è specificato:Il grigio sotto e sopra all'immagine che vedo, come posso toglierlo?
codice:background: silver;Se le immagini hanno tutte le stesse dimensioni, e ne conosci i valori, puoi specificarli per la classe .lavagna, dove ora è specificato:Vorrei far si che le immagini occupassero l'intera lavagna, sia in larghezza che in altezza.
codice:width: 800px; height: 600px;
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Approfitto della tua bontà per un piccolo chiarimento. Questa è la "mia" lavagna":
<div class="lavagna">
<input type=radio name="livelli" checked> <div><img src="Cover.png" alt=""></div>
<input type=radio name="livelli"> <div><img src="Colore8016.png" alt=""></div>
<input type=radio name="livelli"> <div><img src="Colore9016.png" alt=""></div>
<input type=radio name="livelli"> <div><img src="Colore7035.png" alt=""></div>
<input type=radio name="livelli"> <div><img src="Maniglia.png" alt=""></div>
</div>
Un piccolo problema: quando aggiungo la maniglia, quest'ultima viene sovrapposta correttamente, ma sull'ultimo colore che ho selezionato. Ti spiego: dai radio button, se l'ultimo colore è il bianco, ad esempio, la maniglia viene applicata sul bianco, mentre io vorrei che se il colore selezionato è il rosso, e quindi il penultimo dei radio button, voglio che la maniglia venga applicata sul rosso e non sull'ultimo valore della radio button. Nell'anteprima, invece, la maniglia viene sovrapposta sul colore che voglio io, se invece lo seleziono no.
Ultima modifica di dwb; 01-04-2019 a 10:02
~Il nome di una variabile deve riflettere il suo scopo e non il suo tipo di dati, NET Framework.
Chiaro, il sistema è impostato in quel modo, come indicato sopra:
Quando invece esegui l'anteprima (effettuando un hover) su un livello, resteranno visibili solo i livelli selezionati che precedono questo, mentre quelli che lo seguono saranno nascosti per permettere la visualizzazione del livello in anteprima.Il sistema utilizza i radio button per poter visualizzare tutta la serie di immagini dalla prima a quella relativa al livello selezionato.
Se ti interessa rendere indipendenti i livelli selezionati (quindi poterli selezionare in modo discontinuo), allora penso sia meglio usare dei checkbox (anziché radio button) e visualizzarli/nasconderli semplicemente in base allo stato di ciascun checkbox.Ho inoltre prevvisto una ulteriore funzionalità per mostrare l'immagine in semi-trasparenza quando si passa semplicemente (senza cliccare) sul relativo radio, così da avere una "anteprima" del livello prima di selezionarlo.
Bisogna fare qualche modifica ma nulla di così complicato. Vedi se può andare bene in questo modo:
codice:<!DOCTYPE HTML> <html lang="it"> <head> <title>Esempio</title> <meta charset="utf-8"> <style> .lavagna{ width: 800px; height: 600px; position: relative; display: inline-block; border: 1px solid #ddd; border-radius: 4px; text-align: center; background: silver; margin-bottom: 30px; } .lavagna>div{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 4px; opacity: 0; visibility: hidden; transition: .5s .2s; } .lavagna>div>img{ max-width: 100%; max-height: 100%; } .lavagna>input{ display: inline-block; position: relative; top: 100%; width: 30px; height: 20px; background: #eee; border-radius: 3px; border: 1px solid #999; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; cursor: pointer; } .lavagna>input:hover{ background: #9ce; } .lavagna>input:checked{ background: #48d; } .lavagna>input:hover+div{ visibility: visible; opacity: .5; } .lavagna>input:checked+div{ visibility: visible; opacity: 1; } </style> </head> <body> <div class="lavagna"> <input type="checkbox" checked> <div><img src="Cover.png" alt=""></div> <input type="checkbox"> <div><img src="Colore8016.png" alt=""></div> <input type="checkbox"> <div><img src="Colore9016.png" alt=""></div> <input type="checkbox"> <div><img src="Colore7035.png" alt=""></div> <input type="checkbox"> <div><img src="Maniglia.png" alt=""></div> </div> </body> </html>
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Ti ringrazio, va bene, ma vorrei fare una cosa: se volessi mettere una scritta di fianco a ogni checkbox per far capire all'utente cosa seleziona? Ho provato, ma il testo va a finire all'interno della lavagna così facendo:
<input type=radio name="livelli"> Opzione 1<div><img src="Colore7035.png" alt=""></div>
<input type=radio name="livelli">Opzione 2 <div><img src="Colore7035.png" alt=""></div>
~Il nome di una variabile deve riflettere il suo scopo e non il suo tipo di dati, NET Framework.
Prego.Originariamente inviata da dwb
Gli elementi input hanno position:relative con top:100% per fare in modo che siano spostati sotto l'ingombro della lavagna, mentre i nodi di testo in questo caso non vengono spostati.
Per fare ciò che chiedi è necessario inserire i testi dentro dei contenitori (ad esempio degli span) in modo da poterli gestire col CSS.
Qui una rielaborazione del codice precedente:
Vedi se può andare bene.codice:<!DOCTYPE HTML> <html lang="it"> <head> <title>Esempio</title> <meta charset="utf-8"> <style> .lavagna{ width: 800px; height: 600px; position: relative; display: inline-block; border: 1px solid #ddd; border-radius: 4px; text-align: center; background: silver; margin-bottom: 30px; } .lavagna>div{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 4px; opacity: 0; visibility: hidden; transition: .5s .2s; } .lavagna>div>img{ max-width: 100%; max-height: 100%; } .lavagna>input, .lavagna>span{ display: inline-block; position: relative; top: 100%; } .lavagna>input{ margin: 3px 2px 3px 5px; width: 30px; height: 20px; background: #eee; border-radius: 3px; border: 1px solid #999; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; cursor: pointer; } .lavagna>span{ margin-right: 5px; font: 12px sans-serif; vertical-align: super; cursor: default; } .lavagna>input:hover{ background: #9ce; } .lavagna>input:checked{ background: #48d; } .lavagna>input:hover+span+div{ visibility: visible; opacity: .5; } .lavagna>input:checked+span+div{ visibility: visible; opacity: 1; } </style> </head> <body> <div class="lavagna"> <input type="checkbox" checked> <span>Cover</span> <div><img src="Cover.png" alt=""></div> <input type="checkbox"> <span>Colore 1</span> <div><img src="Colore8016.png" alt=""></div> <input type="checkbox"> <span>Colore 2</span> <div><img src="Colore9016.png" alt=""></div> <input type="checkbox"> <span>Colore 3</span> <div><img src="Colore7035.png" alt=""></div> <input type="checkbox"> <span>Maniglia</span> <div><img src="Maniglia.png" alt=""></div> </div> </body> </html>
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Ovviamente funziona perfettamente. Ora vorrei integrare quanto sto realizzando grazie ai tuoi consigli, in un semplice layout composto da: header fisso, con delle voci che andrò poi ad inserire, e due colonne. Quest'ultime vorrei così suddividerle: alla sinistra l'immagine che cambia in base a ciò che seleziono tra le opzioni presenti nella colonna destra, non so se sono stato chiaro.
Ho provato a buttare giù qualcosa, ma non riesco ad integrare quanto fatto con questo layout che ho in mente, poiché mi occupo prevalentemente di sviluppo backend e con i CSS diciamo che non sono il massimo.
~Il nome di una variabile deve riflettere il suo scopo e non il suo tipo di dati, NET Framework.
Da quel che stai indicando ora, ritengo che la questione sia ben più complessa rispetto alle semplici tue indicazioni iniziali e a quanto possa essere applicato partendo dai semplici esempi che ho finora fornito. Bisognerebbe valutare nel dettaglio l'eventuale possibilità di integrare quel sistema in un layout più complesso (benché tu lo abbia definito "semplice"). Una impostazione a colonne potrebbe addirittura essere inadeguata per questo tipo di sistema.
Se si tratta solo di spostare lateralmente i checkbox, si potrebbe pensare di posizionarli in modo opportuno, ma se si tratta di inserire le immagini in una colonna del layout e i checkbox in un'altra colonna separata, allora la cosa non può essere risolta col solo CSS per motivi puramente tecnici; in tal caso ci sarebbe bisogno del supporto di Javascript (come accennato inizialmente) con cui gestire il click di pulsanti (messi dove meglio credi) che mostrano/nascondono le immagini.
La cosa però potrebbe diventare già più complicata per poterla risolvere con una discussione su questa sezione del forum. Tuttalpiù potresti rielaborare opportunamente la richiesta nel forum JavaScript fornendo tutti i dettagli del caso, come il codice del layout e ciò a cui sei arrivato anche integrando il sistema proposto.
Ad ogni modo (non vorrei sembrarti scortese) è chiaro che se il discorso è quello di richiedere l'elaborazione di un applicativo finito (più o meno complesso) che si integri perfettamente nel layout del tuo progetto, abbi pazienza ma questa diventa più una richiesta da fare nella sezione Offro lavoro/collaborazione
Vedi tu come credi sia meglio proseguire
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Permessi di invio
Rispondi quotando