Se desideri che i pulsanti delle tue pagine Web catturino l’attenzione, devi fare di più che aggiungerli semplicemente al tuo codice HTML utilizzando i tag “input”. I pulsanti, per impostazione predefinita, hanno uno sfondo grigio con testo nero. Una semplice funzione JavaScript può cambiare lo sfondo di un pulsante noioso in uno colorato o addirittura abbellirlo con un’immagine a tua scelta.
Creazione di pulsanti
Senza la formattazione CSS, il codice necessario per creare un pulsante di una pagina Web di base viene visualizzato come segue:
Hai la possibilità di aggiungere un riferimento alla classe CSS che imposta lo sfondo del pulsante su giallo come mostrato qui:
La seguente classe CSS, inserita nella sezione dello stile del documento, crea quella classe:
.styleButton {background-color: Yellow;}
Cambia “Giallo” in qualsiasi colore HTML valido per ottenere l’aspetto che desideri. Puoi invece aggiungere un’immagine allo sfondo del pulsante utilizzando il seguente codice CSS:
.styleButton {background-image: url (‘myImage.jpg’);}
Sostituisci “myImage.jpg” con l’URL di qualsiasi immagine sul Web o con l’URL di un’immagine sul tuo server Web.
Parametri di funzione
L’esempio seguente mostra il framework di una funzione che cambia lo sfondo di un pulsante:
function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == “image”) {// Cambia l’immagine di sfondo del pulsante}
else {// Cambia il colore di sfondo del pulsante}}
Questa funzione accetta tre parametri. Il buttonID contiene l’ID del pulsante che si desidera modificare. La variabile backgroundType può avere un valore “color” o “image”. L’ultimo parametro, buttonBackground, contiene il colore che desideri aggiungere al pulsante o l’URL di un’immagine. Il codice elabora la logica definita nel primo blocco “if” se si passa “image” come valore di backgroundType. Altrimenti, esegue le istruzioni nel blocco “else” e cambia il colore di sfondo del pulsante.
Logica del codice
Il codice seguente elenca le istruzioni necessarie per aggiungere un’immagine di sfondo a un pulsante o modificarne il colore di sfondo a seconda del valore passato nel parametro backgroundType:
function changeBackground (buttonID, backgroundType, buttonBackground) {if (backgroundType == “image”) {// Cambia l’immagine di sfondo del pulsante var urlValue = “URL (‘” + buttonBackground + “‘)”; document.getElementById (buttonID) .style.backgroundImage = urlValue; }
else {// Cambia il colore di sfondo del pulsante document.getElementById (buttonID) .style.backgroundColor = buttonBackground; }}
Se chiami la funzione e le passi un backgroundType di “image”, il codice imposta l’attributo backgroundImage del pulsante sul colore passato nella variabile buttonBackground. In caso contrario, il codice imposta l’attributo backgroundColor del pulsante sul colore passato nella variabile buttonBackground.
Tip
Quando si utilizza la funzione per aggiungere un’immagine a uno sfondo, scegline una abbastanza piccola da stare all’interno del pulsante. L’HTML non riduce le dimensioni di un’immagine per adattarla senza un elemento di pagina. Puoi anche far muovere, pulsare o illuminare gli sfondi dei pulsanti aggiungendo piccole GIF animate. Fai attenzione quando inserisci immagini complesse sui pulsanti perché potrebbero rendere difficile la lettura del testo del pulsante se i tuoi pulsanti contengono testo.