creare un pulsante che cambia colore in html

**.:BHZ:.** · 7-05-2008, 09:13:14

su alcuni siti ho vito dei pulsanti in html che se ci passi sopra con il mouse cambiano colore, solitamente diventano con colori "negativi" sapete dirmi come si creano? grazie

**Shura80** · 7-05-2008, 11:03:05

potresti partire da questa base e imparare un po' di css, con i quali farai delle cose fantastiche

Codice:

<html>
   <head>
      <title>test</title>
      
      <style type="text/css">
      
      #pulsante{
      width: 58px;
      background-color: #000;
      color: #fff;
      border: 1px solid #fff;
      text-decoration: none;
      }
     
      #pulsante a:link, visited{
      width: 58px;  
      background-color: #fff;    
      color: #000;
      border: 1px solid #000;
      text-decoration: none;         
      }
      
      #pulsante a:hover{
      width: 58px;      
      background-color: #0099cc;
      color: #fff;
      border: 1px solid #000;
      text-decoration: none;         
      }
      </style>
   
   </head>
   <body>
      <div id="pulsante"><a href="#">clicca</a></div>
   </body>
</html>

**.:BHZ:.** · 7-05-2008, 13:42:15

mmh forse mi sono spiegato male...io devo fare un codice html per il mio blog è solo che ho già fatto i pulsanti quindi vorrei che i miei pulsanti cmbiassero immagine quando si passa con il mouse cioè vorrei fare una cosa del genere

-PULSANTE1.jpeg uppato su imageshack
-PULSANTE1uguale ma colorato in modo diverso uppato su imageshack che si vede solo se ci si passa sopra col mouse

insomma se io ho un pulsante NEWS colorato di verde voglio che quando ci passso col mouse mostri un altra immagine

**ndakota** · 7-05-2008, 14:09:04

puoi usare l'evento onmouseover di javascript per cambiare l'immagine al passaggio del mouse..

**Shura80** · 7-05-2008, 14:28:48

.:BHZ:.

mmh forse mi sono spiegato male...io devo fare un codice html per il mio blog è solo che ho già fatto i pulsanti quindi vorrei che i miei pulsanti cmbiassero immagine quando si passa con il mouse cioè vorrei fare una cosa del genere

-PULSANTE1.jpeg uppato su imageshack
-PULSANTE1uguale ma colorato in modo diverso uppato su imageshack che si vede solo se ci si passa sopra col mouse

insomma se io ho un pulsante NEWS colorato di verde voglio che quando ci passso col mouse mostri un altra immagine

avevi detto cambio di colore infatti

.:BHZ:.

su alcuni siti ho vito dei pulsanti in html che se ci passi sopra con il mouse cambiano colore, solitamente diventano con colori "negativi" sapete dirmi come si creano? grazie

ndakota

puoi usare l'evento onmouseover di javascript per cambiare l'immagine al passaggio del mouse..

o così come dice ndakota, oppure sempre tramite css al posto della proprietà background-color: # tuo_colore, usi background-image: url('tuo_percorso_immagine'). Ovviamente sullo stato link e visited del pulsante metti l'immagine di base che si vede entrando nel sito e sullo stato hover metti quella che invece vuoi che si veda al passaggio del mouse sula pulsante

**.:BHZ:.** · 7-05-2008, 14:34:03

ok grazie dell'aiuto, appena posso ci provo..

**Shura80** · 7-05-2008, 14:44:17

.:BHZ:.

ok grazie dell'aiuto, appena posso ci provo..

prova una cosa del genere (editato, l'esempio che avevo postato era un po' complesso

)

Codice:

 <script language="JavaScript">
                    <!-- 
                    function cambia(ImageName, ImageFile)
                    {
                      ImageName.src = ImageFile;
                    }
                    // -->
                    </script>
<a href="#" onMouseOver="cambia(b1,'bottone2.gif')" onMouseOut="cambia(b1,'bottone1.gif')">
<img name="b1" src="bottone1.gif">
</a>

oppure senza Javascript ma con i CSS. Questa è la parte dell'html

Codice:

<a href="#" class="roll"></a>

e questo il CSS

Codice:

a.roll
{
    background-image: url(immagine_01.gif);
    width: 120px;
    height: 60px;
}

a.roll:hover
{
    background-image: url(immagine_02.gif);
    width: 120px;
    height: 60px;
}

**@@mikele90@@** · 7-05-2008, 15:24:47

javascript come detto sopra � la soluzione,crei 2 bottoni uguali per forma e scritta ma con colore diverso,dopo scrivi il codice postato sopra ed � fatto

**Crazy Scientist** · 7-05-2008, 16:08:53

Ma mi sembra che farlo con il css sia molto + intuitivo, almeno a me sembra così che conosco solo i css

. Ma oggettivamente quale metodo è migliore ?

**@@mikele90@@** · 7-05-2008, 16:46:25

Crazy Scientist

Ma mi sembra che farlo con il css sia molto + intuitivo, almeno a me sembra cos� che conosco solo i css

. Ma oggettivamente quale metodo � migliore ?

javascript secondo me,sono 2 righe:
nella prime dici che colore deve avere normalmente
nella secondo che colore deve avere quando passa sopra il mouse

**Crazy Scientist** · 7-05-2008, 21:38:22

be', anche con i css non ci vuole molto, tenendo anche conto che si deve usare per tutto il resto della pagina, ma te l'ho detto il javascript non lo conosco e quel codice che ha postato Shura80 mi sono alquanto complicate .____.

**Shura80** · 8-05-2008, 11:44:55

Crazy Scientist

be', anche con i css non ci vuole molto, tenendo anche conto che si deve usare per tutto il resto della pagina, ma te l'ho detto il javascript non lo conosco e quel codice che ha postato Shura80 mi sono alquanto complicate .____.

Forse ho preso un esempio un po' complesso, in effetti risulta un po' complesso anche a me

. Ora cerco meglio e edito il post. Comunque io consiglierei sempre l'uso dei CSS, come hai detto anche tu

edit: fatto!

**Crazy Scientist** · 4-06-2008, 15:25:38

� un po' vecchio come thread, ma volevo giusto farvi presente di aver trovato un modo molto pi� sbrigativo di cambiare immagine al passaggio del click con il javascript, in questo modo:

Codice:

<img src="img_1.jpg" onmouseover="this.src='img_2.jpg'" onmouseout="this.src='img_1.jpg'">

Di funzionare funziona, potreste comunque dirmi se lo ritenete funzionale ed efficiente ?

**Shura80** · 4-06-2008, 16:32:02

Crazy Scientist

� un po' vecchio come thread, ma volevo giusto farvi presente di aver trovato un modo molto pi� sbrigativo di cambiare immagine al passaggio del click con il javascript, in questo modo:

Codice:

<img src="img_1.jpg" onmouseover="this.src='img_2.jpg'" onmouseout="this.src='img_1.jpg'">

Di funzionare funziona, potreste comunque dirmi se lo ritenete funzionale ed efficiente ?

Eccome

, non ci avevo pensato, non ho mai digerito javascript

**Crazy Scientist** · 4-06-2008, 18:40:15

Io invece ho letto un paio di guide molto teoriche, ma per esempio non ho trovato da nessuna parte quali siano i 'percorsi' (probabilmente il termine è sbagliato) del tipo 'this.src',...In pratica cerco un elenco o un grafico di quali siano queste diciture e di come vadano combinate, non sapendole posso farci ben poco col javascript, voi sapete mica dove posso trovarli (in internet si intende)

Amministratori
206567@RedazioneGV	233018@techGV
Guardian
215617@Don Dema	153820@Illuminated
5880@iMaX
Moderatori
95216@Alienware	234323@Bismark
236104@gabry1710	172466@King_Of_Kings_21
26508@Metalmark	28512@MikiM
235165@Redazione Gamesvillage	233457@TheGu
236103@thekingdani	87740@titan2010

Discussione: creare un pulsante che cambia colore in html

Strumenti Discussione

creare un pulsante che cambia colore in html

Regole di Scrittura