Rollover tra 2 immagini di differente dimensione

[mauronet]

Ho letto decine di tutorial su internet sul rollover ma tutti (almeno quelli che ho trovato io) sono per immagini che hanno la stessa dimensione.

Io dovrei invece realizzare un rollover (se possibile solo con i css) tra due immagini di differente dimensione un logo di 80x50 pixel passando sul quale deve visualizzarsi un banner di 226x50 pixel.

per utilizzare uno dei tutorial trovati mi sono arrangiato mettendo il logo piccolo in un'immagine trasparente della stessa grandezza del banner (226x50) ma non mi soddisfa perchè ovviamente scatta il rollover anche quando il mouse passa ai lati trasparenti del logo.

inoltre, ma questo è un problema secondario che potrei anche lasciar perdere, devo dichiarare un colore di sfondo nel css altrimenti le immagini si sovrappongono mentre per me l'ideale sarebbe che le immagini potessero restare trasparenti adattandosi al colore di sfondo della pagina in cui si trovano.

Questo è il codice che ho usato per il mio rollover che ho preso da un tutorial su internet

CSS:

/* Rollover start */

#foto{
margin:20px auto;
padding:0;
text-align:center;
background:url(logoa226x50.png) center center no-repeat #89a;
width:234px;
height:58px;
}
img{
margin:4px;
padding:0;
}

.rollover{
width:226px;
height:50px;
}

.rollover img { border:none;}

.rollover a { display:block; }

.rollover a:hover img { display:none; }

.rollover a:hover{
width:234px;
height:58px;
background:url(bannerb226x50.png) center center no-repeat #89a;
}

/* Rollover fine */

HTML:

<div id="foto" class="rollover">
[img]logoa226x50.png[/img]
</div>

a questa pagina l'esempio pratico http://makrosoft.xoom.it/rollover.htm


Se qualcuno ha qualche suggerimento / idea in proposito su come potrei risolvere gliene sarei molto grato.

[Prill]

Una cosa così?

div#roll {
width:226px;
}
a.rollover{
display:block;
width:80px;
height:50px;
margin:0 auto;
background:url(logoa80x50.png) no-repeat center center
}

a.rollover:hover {
width:226px;
background:url(bannerb226x50.png) no-repeat center center
}

a.rollover span {
display:none;
}

...

<div id="roll">
   <span>testo</span>
</div>

[mauronet]

Grazie mille era proprio quello che mi serviva, te ne sarò eternamente grato.

Ora mi studio per bene il codice in modo da capire e imparare qualcosa di nuovo;

specialmente voglio capire la funzione dello span nascosto al quale non avrei mai pensato allo stato delle mie conoscenze attuali dei css.

Probabilmente da solo non ci sarei mai arrivato o ci avrei messo qualche mese

Grazie ancora e a buon rendere.