Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 13
  1. #1

    "button" con cambio immagine al passaggio del mouse

    Vorrei creare un normalissimo button: <button type="button">Cerca</button>

    che al passaggio del mouse cambi l'immagine di background, tipo quella che c'è in questo sito per capirci: www.agriturismo.it

    Sembrerebbe una cosa abbastanza semplice, ma sono due ore che giro su google in cerca di risposte e non ne ho trovate (almeno non risposte semplici!!!).

    C'è qualcuno che può aiutarmi? Considerate che sono proprio alle prime armi...

  2. #2
    Utente di HTML.it
    Registrato dal
    Apr 2012
    residenza
    Lima, Perù
    Messaggi
    212
    devi usare il CSS...

    crei un id o una class (ad esempio #cerca) e dai i valori "iniziali", con :hover dai i valori che vuoi che abbia quando il mouse è sopra...

    #cerca{background-color:#fff;color#000}
    #cerca:hover{background-color:#000;color#fff}

    no sarebbe meglio usare un input submit?
    Jamie Ynonan - Web Developer / Desarrollador Web - HTML5 - CSS3 - Javascript/jQuery - PHP/CodeIgniter/Laravel - SQL/MySQL - Wordpress
    Telelavoro / Teleworking - jamiea31[at]gmail.com - Lima - Perù - GMT -5

  3. #3
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    
    <style type="text/css">
    #but {
    	width: 82px;
    	height: 33px;
    	background-color: transparent;
    	background-image: url(but-su.png);
    }
    #but:hover {
    	width: 82px;
    	height: 33px;
    	background-color: transparent;
    	background-image: url(but-giu.png);
    }
    </style>
    </head>
    
    <body>
    <button type="button" id="but"></button>
    </body>
    </html>

    Originariamente inviato da minos88
    no sarebbe meglio usare un input submit?
    Perchè?
    [list=1][*]Bisogna vedere come deve utilizzarlo se per un form o altro esempio un semplice link[*]button va bene anche per un submit,[/list=1]
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2012
    residenza
    Lima, Perù
    Messaggi
    212
    Originariamente inviato da carlomarangoni

    Perchè?
    [list=1][*]Bisogna vedere come deve utilizzarlo se per un form o altro esempio un semplice link[*]button va bene anche per un submit,[/list=1]
    se parlo di un input submit è perché immagino deva fare un submit e non un semplice link...
    Jamie Ynonan - Web Developer / Desarrollador Web - HTML5 - CSS3 - Javascript/jQuery - PHP/CodeIgniter/Laravel - SQL/MySQL - Wordpress
    Telelavoro / Teleworking - jamiea31[at]gmail.com - Lima - Perù - GMT -5

  5. #5
    Originariamente inviato da minos88
    se parlo di un input submit è perché immagino deva fare un submit e non un semplice link...
    Ripeto! Anche con bottom si fa un submit!!

    Ma se tu guardi bene lui ha proprio specificato type="bottom"
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  6. #6
    Utente di HTML.it
    Registrato dal
    Apr 2012
    residenza
    Lima, Perù
    Messaggi
    212
    Originariamente inviato da carlomarangoni
    Ripeto! Anche con bottom si fa un submit!!

    Ma se tu guardi bene lui ha proprio specificato type="bottom"
    forse la mia domanda non era molto chiara... visto che (immagino), per fare la ricerca usi un form, e dentro il tasto Cerca (<button type="button">Cerca</button>) non inserisci nessun tag html, non sarebbe meglio usare input submit? oppure c'è qualche motivo in particolare per cui hai scelto button?
    Jamie Ynonan - Web Developer / Desarrollador Web - HTML5 - CSS3 - Javascript/jQuery - PHP/CodeIgniter/Laravel - SQL/MySQL - Wordpress
    Telelavoro / Teleworking - jamiea31[at]gmail.com - Lima - Perù - GMT -5

  7. #7
    Certo che dentro a un form sta bene usare i suoi componenti input! Ma nessuno ci vieta di usare bottom con onclic ecc., anche esso ha tante possibilità da poter usare
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  8. #8
    ueee...ragazzi...non litigate eh??

    Grazie intanto ad entrambi per i consigli! In effetti devo usare un form, comunque se ho capito bene va bene sia il "button" sia il "submit" giusto? Ma quale può essere più adatto tra i due? Considerate che voglio che nello sfondo ci sia una vera immagine e non un effetto di CSS tipo quello che fanno i generatori di "button" online.

    Adesso comunque proverò a mettere in pratica le soluzioni che mi avete suggerito, poi vi faccio sapere!

  9. #9
    Tutto a posto, funziona regolarmente. Ho messo un id e sono riuscito a inserire due immagini che si alternano.

    Grazie a entrambi!

  10. #10
    Originariamente inviato da alrrendita
    In effetti devo usare un form, comunque se ho capito bene va bene sia il "button" sia il "submit" giusto? Ma quale può essere più adatto tra i due?
    Ovviamente il tag input! Al quale puoi applicare il codice che ti ho dato per il bottom
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.