rollover immagini, o meglio, immagine...

[Pablo90]

Salve a tt, vorrei fare un effetto rollover come questo:
http://it.swisscom.ch/clientiprivati

In alto a destra, dove c'è la ricerca..passate sul tasto di invio..
Praticamente è un'immagine unica, che a dipendenza del mouse (over o out) si "sposta"...

http://de.swisscom.ch/img/search_submit.gif


Io vorrei fare la stessa cosa con una mia immagini:
La mia immagine è in allegato...

Se possibile, vorrei evitare:
1) di mettere l'immagine come sfondo..dunque deve essere un <img ....>..
2)Creare classi per effetto over/out, perkè uso già altre classi..e poi dovrei mettere l'img come sfondo..

Vorrei far notare che l'immagine è "simmetrica"...L'altezza mi pare che è di 42px: bene, quella dell'immagine out è 21...la metà esatta...


Spero che possiate aiutarmi postandomi il codice "di base"...poi ci penso io a cambiare il nome dell'immagine, la path e mettere le varie variabili (la devo usare per una skin che sto creando, di smf -un forum- .)..

CIao e thx in anticipo

[gabip87]

fai un image replacement e usa il background-position per spostarti sull'immagine.

[Pablo90]

mmm ho provato a leggere l'articolo ma non è che ci ho capito molto..Anche perkè io non uso <h1> <h2> e quei tag li...
E poi quale dovrei fare? ce ne sono diversi, non solo uno...

cioè io potrei fare così nel seguente modo?

oliodigirasole

{
    display: block;
    width: 0; height: 0; line-height: 0; /* attribuisce dimensioni nulle */
    overflow: hidden; clip: rect(0,0,0,0); /* nasconde il testo */
    }

nel css...e poi nell'html creo uno span (un div va bn lo stesso? e un td?) e gli do classe oliodigirasole... Ma poi come metto l'immagine ?
Scusate ma sono un po' niubbo a imparare con guide etc ma poi quando prendo piede comincio a cavarmela da solo

EDIT:scusa qui: http://it.html.net/tutorials/css/lesson3.asp
nel background-attachment avete scambiato i due esempi era solo per avvertirvi

[Pablo90]

ho provato così:

.modifica_b, .modifica_b a:link {background: url(images/modify_tt.gif) no-repeat;width: 86px; height:21px;}
.modifica_b a:hover { background-position: 0 -21px; width:86px;height:21px; }

E poi nell'html ho semplicemente messo <div class="modifica_b">< a ....>xxx</a></div>

Ma niente..c'è lo sfondo ma non cambia quando ci passo sopra.. ho provato a cambiare la posizione del bg, metendo 10 da sinistra per vedere se non avevo sbagliato solo quello, ma non succede niente.e poi il xxx viene riportato, anche se con il overflow:hidden il testo non dovrebb esserci..