Inserisci un'immagine in un button
Vediamo in questo articolo come inserire un'immagine inun tag:
<input type="button"><input type="submit"><input type="reset">
Compatibile con Msie e Netscape 6xx
Per questa funzione usiamo i fogli di stile inserendol'immagine con la
proprietà background-image questaproprietà necessita di una chiamata url
per l'inserimento dell'immagine e si definisce inquesto modo:
background-image:url('immagine.gif')
In questo esempioai due button "Invia" e "Resetta" sonostate assegnate dimensioni
(obbligatorie per questa funzione) in pixel di: 100px inlarghezza e 44px in altezza,
mentre le due immagini misurano: 66px * 28 per Invia e 66px* 26px per Resetta.
Se la dimensione width e height del button non vienedichiarata otterremo questo risultato:
Questo è dovuto al fatto che questa funzionenecessita del parametro value=""
lasciato vuoto (il browser Netscape 6xx difetta sul tastoreset, se il value non viene scritto
con gli apici staccati da uno spazio: value=" " ,visualizza la scritta Ripristina. Il browser Msie
visualizza la scritta Reimposta se il tag value vienetolto), ES:
Lasciare il tag value=" " con uno spazio funzionacorrettamente con i due browser sopra citati.
Sono note le proprietà dei fogli di stile perpersonalizzare i button dei form,
il colore del button, il tipo di font, il colore del fontecc...
Se non vogliamo assegnare nessuna proprietà dei CSSal button, la larghezza dello stesso verrà presa
dal value (che è il tag che scrive il testo sulbutton), ES:
In questo caso possiamo ovviare al problema di avere duetasti di differente grandezza
aumentando gli spazi nel value: value=" Ciao " , ma date le differenze
dei browser nell'interpretare tali proprietà,come ad esempio il size di un campo di testo o il rows e ilcols
di un campo textarea è impossibile ottenere glistessi risultati.
Mentre con l'immagine agendo sul value possiamoraggiungere la dimensione dell'imagine solo in larghezza:
Al width e l'height del button devono essere aggiunti6px rispetto alla dimensione dell'immagine.
Button con le stesse dimensioni dell'immagine:
Button con l'aggiunta di 6px:
Possiamo inserire tutte le proprietà assegnando unnome a una classe nei tag <style> e </style> erichiamare la classe:
<input type="button"class="nomeclasse" value=" "> oinserite tutto direttamente nel tag <input
L'aver fatto nell'esempio i bottoni decisamentepiù grandi dell'immagine è per vederealcune proprietà
dei fogli di stile utili per questa funzione.
<style>.bottone{background-image:url('invia.gif');background-repeat:no-repeat;background-position:center center;width:100px;height:44px;background-color:0000ff;}.resetta{background-image:url('resetta.gif');background-repeat:no-repeat;background-position:center center;width:100px;height:44px;background-color:0000ff;}</style><body><form><input type="button" class="bottone" value=" "><input type="reset" class="resetta" value=" "></form>
<form><input type="button" style="background-image:url('invia.gif');background-repeat:no-repeat;background-position:center center;width:100px;height:44px;background-color:0000ff;" value=" "><input type="reset" style="background-image:url('resetta.gif');background-repeat:no-repeat;background-position:center center;width:100px;height:44px;background-color:0000ff;" value=" "> </form>
Vediamo le proprietà dei fogli di stile inserite:
background-image:url('invia.gif'); Inseriscenel button l'immagine inserita tra le parentesi.
background-repeat:no-repeat; Fa si che l'immaginenon venga ripetuta se la grandezza del button èmaggiore dell'immagine.
background-position:center center; Fa si chel'immagine sia sempre al centro del button, center centerpossono essere sostituiti
con valori in Pixel ES: background-position:5px 5px; dove ilprimo valore fa riferimento alla distanza dal marginesinistro (Left) del button,
il secondo fa riferimento alla distanza dal margine alto(Top) del button.
width:100px;height:44px; Grandezza del button.
background-color:0000ff; Colore sfondo del button.
- Articolo precedente Impostare i dati in un link di tipo mailto
- Articolo successivo Conteggio dei caratteri di una Textarea senza spazi