INDICE

CAMBIARE ASPETTO AD UN PULSANTE AL PASSAGGIO DEL MOUSE


Abbiamo già visto come cambiare l'aspetto di un pulsnte, ma il trucco funziona solo con MSIE.

Adesso invece presentiamo un metodo che funzioni sia con MSIE che con Mozila Firefox.

Esempio funzionante

Il seguente pulsante cambia colore al passaggio del mouse e, se cliccato, collega al nostro sito:

SPIEGAZIONE

  1. Decidiamo uno stile per il bottone a riposo (input.primo) sia per lo stesso al passaggio del mouse (input.secondo)
  2. inseriamo lo stile fra i tag <head> ed </head>
    Codice:

    <Style Type="TEXT/CSS">
/*esempio aspetto del bottone a riposo: abbiamo definito colore della scritta,
   dimensione del carattere, tipo di font, grassetto, colore di sfondo*/
input.primo { 
  color:#ffe4b5; 
   font-size:16px;
   font-family:'garamond','verdana';
   font-weight:bold;
    background-color: #bc8f8f; 
	}
/*esempio aspetto del bottone al passaggio del mouse: consigliamo di non variare la font
  per non far scorrere la pagina */  
input.secondo { 
color: #bc8f8f; 
font-size:16px;
   font-family:'garamond','verdana';
   font-weight:bold;
 background-color: #ffe4b5; 
	} 
  </Style>

    1. Inseriamo il bottone, nella posizione desiderata, e con il seguente codice:

    <INPUT type=button size=22 value=www.webfract.it class="primo"
<!--Al posto di www.webfract.it inserire la caption desiderata-->
onmouseover="this.className='secondo'" onmouseout="this.className='primo'"
onclick="window.open('...','_self')">
<!--Al posto dei puntini sostituire l'URL desiderata, al posto di _self il target desiderato-->

    INDICEINDIETRO

    ©2010 www.webfract.it