problema con css di background

[13manuel84]

ho questa classe:

.my_class a{
	background-image:url(img/et-logo.gif);
}
.my_class a:hover{
	background-image:url(img/bg-riga.gif);
}

premetto che funziona, però se ho ad esempio un link con scritto ciao, lo sfondo giustamente sta solo sulla parola ciao, e non mi fa vedere tutta l'immagine, se io invece volessi vedere tutta l'immagine come dovrei fare?

Vi spiego qual è il mio problema che magari si può risolvere in maniera diversa...
io ho un'immagine, e vorrei che passandoci sopra con il mouse l'immagine cambi e per questo avevo pensato di utilizzare i css in questo modo, ce n'è un altro?

Grazie!

[13manuel84]

niente ragazzi!lasciate stare!ho risolto usando semplicemente javascript

Per chi fosse interessato posto la soluzione:
<a href="javascript:;" onMouseOver="document.images['example'].src=img1.src" onMouseOut="document.images['example'].src=img2.src">
[img]nome-img2.gif[/img]</a>

e questa la parte js:

<script type="text/javascript">
img1=new Image();
img1.src="nome-img1.gif";
img2=new Image();
img2.src="nome-img2.gif";
</script>

[zoom]

un'idea potrebbe essere quella di dare display:block al link e poi un min-width (con hack per IE) di dimensione uguale all'immagine...
però non so se funziona, non ho mai provato :master:

[13manuel84]

Originariamente inviato da zoom
un'idea potrebbe essere quella di dare display:block al link e poi un min-width (con hack per IE) di dimensione uguale all'immagine...
però non so se funziona, non ho mai provato :master:

diciamo che mi ero spiegato un attimino male prima...la mia necessità era solo quella di avere un'immagine che passandoci sopra con il mouse cambiasse. La storia del link era un trucchetto, perché non sapevo come farlo...ma ora ho messo i metodi del mouse direttamente nel tag img senza nessun link e va benone.

Grazie lo stesso!

[zoom]

ok, avevo visto dopo la tua seconda risposta..

[13manuel84]

adesso però ho un problema...

<div id="my_div" class="my_class">Ciao mamma</div>
e questo è il css:

#my_div{
	width:150px;
	height:50px;
	background-color:#0000FF;
}
#my_div a{
	width:150px;
	height:50px;
	background-color:#0099FF;
}
#my_div a:hover{
	width:150px;
	height:50px;
	background-color:#00FFFF;
}
.my_class{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}

il primo sfondo ok, me lo fa su tutto, ma perché per l'a e l'a:hover lo sfondo me lo fa solo alla parola o alla frase linkata??non so se mi sono spiegato bene, comunqeu basta provare il codice sopra per capire cosa intendo

Grazie!

[BananaBoat]

[ot]per 13manuel84: dove l'hai trovato quell'avatar?[/ot]

[zoom]

perchè tu applichi lo sfondo al link, e il link è solo la parola...
applica

display:block;

al link in modo da renderlo un blocco.
così dovrebbe funzionare...

[13manuel84]

Originariamente inviato da zoom
perchè tu applichi lo sfondo al link, e il link è solo la parola...
applica

display:block;

al link in modo da renderlo un blocco.
così dovrebbe funzionare...

Grazie mille, è proprio quello che intendevo!

@BananaBoat: non mi ricordo!me lo sono trovato sul pc ma non ricordo dove l'ho preso