Sfondo variabile pulsante

[mrkarati]

Salve,
volevo chiedere se e come si potesse creare un pulsante che cambia il colore di sfondo al passaggio del mouse. Attualmente il codice che sto usando è il seguente:

<label><input style="height: 25px; background-color:#bbbbbb; border: 1px solid black;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" type="submit" name="submit" id="submit" value="Invialo!!"/></label>

PS: portate pazienza se continuo ad aprire discussioni in questi giorni...

[karl94]

Non puoi continuare ad usare esclusivamente l'attributo style, così mischi la struttura (HTML) con lo stile (CSS). Devi avere le tue pagine con solo la struttura che poi richiamano in testa il foglio di stile, facendo così puoi anche attribuire lo stesso foglio di stile per tutte le pagine e cambiare in un colpo la grafica di tutto il sito.

Quindi comincia: fai una copia di tutto il tuo sito, leva da ogni pagina tutti gli attributi style e inserisci nell'head un elemento link con attributo type impostato su text/css e l'attributo rel su stylesheet, l'indirizzo del foglio di stile lo specificherai nell'attributo href. Infine crea questo foglio di stile CSS: dovrai semplicemente inserire le stesse proprietà che inserivi negli attributi style all'interno di regole. Una regola CSS è costituita da un selettore, seguito dalle proprietà CSS (racchiuse in blocco tra parentesi graffe) da applicare a tutti gli elementi che soddisfano quel selettore.

Ed è proprio sul selettore che devi lavorare per questo specifico problema, ti serve la pseudo-classe hover che permette di identificare un elemento sotto il cursore del mouse.

Per dettagli sui selettori puoi consultare la guida che ti ho precedentemente indicato nell'altra discussione.

[mrkarati]

A dir il vero ho già una pagina CSS che è questa: http://mrkarati.altervista.org/ColoriStili.css

Ieri, all'interno dell'head, ho inserito questa riga:

<link type="text/css" rel="stylesheet" href="ColoriStili.css" />

All'interno dell'html utilizzo molto spesso l'attributo style per dare alcuni caratteri specifici e non generali. Ovviamente però ribadisco che questo è il primo sito che faccio da 0 per cui non ho idea di quale sia il modo migliore per programmare... motivo per il quale ogni vostro consiglio lo accetto volentieri.


Per quanto riguarda il pulsante invece, girovagando in internet ho trovato una soluzione che immagino sia quella che tu m'hai descritto (non ho avvisato prima di questa cosa per paura di beccarmi un warning). Ho trasformato il codice html così:

<label><input class="primo" onmouseover="this.className='secondo'" onmouseout="this.className='primo'" type="submit" name="submit" id="submit" value="Invia il Video a MrKarati!"/></label>

Invece nel foglio CSS ho aggiunto queste righe:

input.primo {height: 30px; background-color:#bbbbbb; border: 0px solid black;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
input.secondo {height: 30px; background-color:#cecece; border: 0px solid black;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

[karl94]

A dir il vero ho già una pagina CSS che è questa: http://mrkarati.altervista.org/ColoriStili.css

Ieri, all'interno dell'head, ho inserito questa riga:

<link type="text/css" rel="stylesheet" href="ColoriStili.css" />

Perfetto, va benissimo.

All'interno dell'html utilizzo molto spesso l'attributo style per dare alcuni caratteri specifici e non generali. Ovviamente però ribadisco che questo è il primo sito che faccio da 0 per cui non ho idea di quale sia il modo migliore per programmare... motivo per il quale ogni vostro consiglio lo accetto volentieri.

Come ti ha già spiegato Dreadnaut nell'altra discussione, l'uso di questo attributo deve essere ridotto al minimo ed è sempre preferibile usare classi e identificatori per identificare i vari elementi.

Per quanto riguarda il pulsante invece, girovagando in internet ho trovato una soluzione che immagino sia quella che tu m'hai descritto . Ho trasformato il codice html così:

<label><input class="primo" onmouseover="this.className='secondo'" onmouseout="this.className='primo'" type="submit" name="submit" id="submit" value="Invia il Video a MrKarati!"/></label>

Invece nel foglio CSS ho aggiunto queste righe:

input.primo {height: 30px; background-color:#bbbbbb; border: 0px solid black;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
input.secondo {height: 30px; background-color:#cecece; border: 0px solid black;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}

No, questa soluzione non va bene, usa Javascript inutilmente, appesantisce e basta. Devi solo usare la pseudo classe hover:

selettore{lista di proprietà da applicare sempre}
selettore:hover{lista di proprietà da applicare quando il puntatore del mouse è sopra l'elemento identificato dal selettore}

Ti ricordo che essendo il CSS a cascata le proprietà definite nella prima regola del mio esempio permarranno anche in concomitanza con le proprietà definite nella seconda regola, per esempio, se nella prima regola imposti il colore del testo rosso e uno sfondo giallo mentre nella seconda imposti solo uno sfondo verde, al passaggio del mouse solo il colore di sfondo verrà modificato, mentre il testo rimarrà rosso.

(non ho avvisato prima di questa cosa per paura di beccarmi un warning)

Puoi sempre usare il pulsante modifica per integrare i messaggi con le novità.

Altre piccole precisazioni: il CSS non è un linguaggio per descrivere documenti (quello è l'HTML), ma descrive fogli di stile, non dire dunque pagina CSS ma foglio di stile CSS; inoltre tutte queste cose non concernono la programmazione: HTML e CSS non sono linguaggi di programmazione.

[mrkarati]

Che dire... ti ringrazio veramente molto per le spiegazioni e per la pazienza, mi stai aiutando non poco. Ora provo subito a fare le modifiche che m'hai consigliato.