onmouse over su bg

[gaia2003]

ciao a tutti.
ho creato un menù in una tabella con all'interno delle gif.
vorrei creare un effetto "onmouseover" che però cambi l'immagine di backgroud della cella (all'interno della quale c'è la gif con una voce del menù)
si può fare?

grazie a ttutti

[pierofix]

Le tabelle non servono a fare menù.

Ecco un esempio di menù:

<ul id="menu">[*]Ciao[*]Miao[*]Bau[/list]

Nulla di più.


Ora, con i css, ci divertiamo a creare gli effetti grafici.

#menu li a {
   color: #069;
   text-decoratior: none;
   width: 100px; height: 30px; line-height: 30px;
   background: url(tuaimg1.gif) no-repeat 0 0;
}
#menu li a:hover {
   background: url(tuaimg2.gif) no-repeat 0 0;
}

dove tuaimg1.gif è l'immagine di default, mentre tuaimg2.gif è l'immagine da far comparire all'onmouseover.

[gaia2003]

il fatto è che io ho i pulsanti che sono delle immagini trasparenti e vorrei/dovrei applicargli uno sfondo diverso con il mouse over.

[atrebor]

puoi farlo lo stesso anche se hai il rollover con due immagini "grafiche":

nel foglio di stile:

.bottoneOn{
	background-image: url(immagineattiva.jpg);
}
.bottoneOff{	
	background-image: url(immaginespenta.jpg);	
}

e poi nel codice html ci metti:

onMouseOver="this.className='bottoneOn'" onMouseOut="this.className='bottoneOff'"

ciao!

[gaia2003]

grazie! ho provato però non funge....
puoi dare una controllatina al codice?

<style>
.bottoneOn{
backgroud-image: url(http://www.miosito.it/images/barra_on.gif);
}
.bottoneOff{
backgroud-image:url(http://www.miosito.it/images/barra_off.gif);
}
</style>
<table id="tabsup" width="755" border="0" cellspacing="0" cellpadding="0" background="http://www.miosito/images/barra_off.gif">
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
</table>

[atrebor]

Se i tuoi 4 bottoni hanno lo stesso aspetto, ma si differenziano soltanto per la scritta, ti consiglio di realizzare due sole immagini di sfondo (senza testo), che farai diventare gli sfondi per le classi bottoneOn e bottoneOff.
Poi nella cella inserisci soltanto il testo e gli assegni le 2 classi. Ovviamente sarebbe preferibile aggiungere
larghezze e allineamenti direttamente nel css, in modo da ripulire maggiormente il codice html.

<td class="bottoneOff" onMouseOver="this.className='bottoneOn'" onMouseOut="this.className='bottoneOff'"     onClick="location.href='https://www.miosito.it/reindirizza.jsp?SP=Log'">scritta 1 ban</td>
<td><div align="center"></div></td>
<td class="bottoneOff" onMouseOver="this.className='bottoneOn'" onMouseOut="this.className='bottoneOff'"     onClick="location.href='https://www.miosito.it/reindirizza.jsp?SP=Log'">scritta 2 inv</td>
<td><div align="center"></div></td>
<td class="bottoneOff" onMouseOver="this.className='bottoneOn'" onMouseOut="this.className='bottoneOff'" 
onClick="location.href='https://www.miosito.it/reindirizza.jsp?SP=Log'">scritta 3 cre</td> 
<td><div align="center"></div></td>
<td class="bottoneOff" onMouseOver="this.className='bottoneOn'" onMouseOut="this.className='bottoneOff'"     onClick="location.href='https://www.miosito.it/reindirizza.jsp?SP=Log'">scritta 4 ag</td>

[gaia2003]

in effetti ho soltanto 2 immagini per il background, quella per l'on e quella per l'off.
nella tabella invece, non potendo mettere la scritta, devo metterci l'immagine trasparente conil nome del link.

ho fatto e seguito i tuoi consigli ma non sembra funzionare....

ma la definizione del css, così come l'ho scritta io, è giusta?

<style>
.bottoneOn{
backgroud-image: url(http://www.miosito.it/images/barra_on.gif);
}
.bottoneOff{
backgroud-image: url(http://www.miosito.it/images/barra_off.gif);
}
</style>

[atrebor]

io non ho mai messo l'url assoluto dell'immagine, ma sempre solo il percorso relativo...
pero' in linea teorica dovrebbe funzionare anche quello assoluto

l'esempio che ti postato io l'ho usato per un menu laterale, con una <TR> sotto l'altra, ma le classi le ho applicate sul testo... e funziona
Ho fatto i due bottoni con gli effettini grafici etc., ma il nome del bottone (es: HOME - NEWS - CONTATTI) l'ho inserito solo nel codice html, non nel file gif - naturalmente e' molto piu' comodo anche per le modifiche

[gaia2003]

niente. non sembra funzionare!
scusa...il tag style dove va? io l'ho messo tra la head....giusto?

[kola]

gaia2003

se il codice è ancora quello che hai postato inserisci la class di partenza.