 Buono sconto 4% su Toner e Cartucce agli utenti AZpoint. SU Iomiricarico.it!!
Vediamo in questo articolo come inserire un'immagine in un tag:
<input type="button">
<input type="submit">
<input type="reset">
Compatibile con Msie e Netscape 6xx
Per questa funzione usiamo i fogli di stile inserendo l'immagine con la
proprietà background-image questa proprietà necessita di una chiamata url
per l'inserimento dell'immagine e si definisce in questo modo:
background-image:url('immagine.gif')
In questo esempio ai due button "Invia" e "Resetta" sono state assegnate dimensioni
(obbligatorie per questa funzione) in pixel di: 100px in larghezza 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 viene dichiarata otterremo questo risultato:
Questo è dovuto al fatto che questa funzione necessita del parametro value=""
lasciato vuoto (il browser Netscape 6xx difetta sul tasto reset, 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 viene tolto), ES:
Lasciare il tag value=" " con uno spazio funziona correttamente con i due browser sopra citati.
Sono note le proprietà dei fogli di stile per personalizzare i button dei form,
il colore del button, il tipo di font, il colore del font ecc...
Se non vogliamo assegnare nessuna proprietà dei CSS al button, la larghezza dello stesso verrà presa
dal value (che è il tag che scrive il testo sul button), ES:
In questo caso possiamo ovviare al problema di avere due tasti 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 il cols
di un campo textarea è impossibile ottenere gli stessi risultati.
Mentre con l'immagine agendo sul value possiamo raggiungere la dimensione dell'imagine solo in larghezza:
Al width e l'height del button devono essere aggiunti 6px rispetto alla dimensione dell'immagine.
Button con le stesse dimensioni dell'immagine:
Button con l'aggiunta di 6px:
Possiamo inserire tutte le proprietà assegnando un nome a una classe nei tag <style> e </style> e richiamare la classe:
<input type="button" class="nomeclasse" value=" "> o inserite tutto direttamente nel tag <input
L'aver fatto nell'esempio i bottoni decisamente più grandi dell'immagine è per vedere alcune 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'); Inserisce nel button l'immagine inserita tra le parentesi.
background-repeat:no-repeat; Fa si che l'immagine non venga ripetuta se la grandezza del button è maggiore dell'immagine.
background-position:center center; Fa si che l'immagine sia sempre al centro del button, center center possono essere sostituiti
con valori in Pixel ES: background-position:5px 5px; dove il primo valore fa riferimento alla distanza dal margine sinistro (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.
Giari Massimo
|
Shopping
