"button" con cambio immagine al passaggio del mouse

**alrrendita** · 27-02-2013, 23:01

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...

**minos88** · 28-02-2013, 00:38

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?

**carlomarangoni** · 28-02-2013, 00:49

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]

**minos88** · 28-02-2013, 01:34

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...

**carlomarangoni** · 28-02-2013, 01:38

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"

**minos88** · 28-02-2013, 02:19

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?

**carlomarangoni** · 28-02-2013, 03:15

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

**alrrendita** · 28-02-2013, 12:35

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!

**alrrendita** · 28-02-2013, 18:55

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

Grazie a entrambi!

**carlomarangoni** · 28-02-2013, 19:00

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

Discussione: "button" con cambio immagine al passaggio del mouse

Strumenti discussione

Ricerca discussione

Visualizza

"button" con cambio immagine al passaggio del mouse

Permessi di invio