ciao a tutti!
ho un semplice css:
<style type="text/css">
<!--
.sfondoGiallo {
background-attachment: fixed;
background-image: url(sfondo1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
-->
</style>
applicato ad un TD
vorrei che quando il mouse entra nel "TD", l'immagine associata cambi...
come si può fare??
Per i browser standard, basta che aggiungi:
.sfondoGiallo:hover {
background-image: url(sfondo1hover.jpg);
}
Per i browser IE :hover si puo` applicare solo ai link, per cui risolvi con:
.sfondoGiallo a {
display: block;
width: 100%;
height: 100%;
background-attachment: fixed;
background-image: url(sfondo1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.sfondoGiallo a:hover {
background-image: url(sfondo1hover.jpg);
}
E naturalmente devi inserire un <a href="#"> all'interno del <td>
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
può funzionare con questo codice:
<td id="sfondoGiallo">abc</td>
anche se inserisco il css che mi suggerisci.. non funziona nulla!
dove dovrei inserire <a href=""> ???
Occhio ai selettori.
Se il selettore e`
.sfondoGiallo
il tag deve avere la classe sfondoGiallo:
<td class="sfondoGiallo">
Il tag <a> va inserito subito all'interno del <td>
<td class="sfondoGiallo">... qui il resto del codice...</td>
Attenzione pero` che non ci possono essere oggetti di tipo blocco all'interno di un <a>
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
non mi funziona il rollover...
cosa c'e' che non va?
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.sfondoGiallo a {
display: block;
width: 100%;
height: 100%;
background-attachment: fixed;
background-image: url(sfondo1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.sfondoGiallo a :hover {
background-image: url(sfondo2.jpg);
}
</style>
</head>
<body>
<table width="500" border="1">
<tr>
<td width="20%" height="49" class="sfondoGiallo"> </td>
<td width="20%" height="49" class="sfondoGiallo"> </td>
<td width="20%" height="49" class="sfondoGiallo"> </td>
<td width="20%" height="49" class="sfondoGiallo"> </td>
<td width="20%" height="49" class="sfondoGiallo"> </td>
</tr>
</table>
</body>
</html>
2 errori (che riesco a vedere)
1: I tag <a> sono vuoti: e un tag vuoto puo` venir ignorato
2: non esiste il tag <:hover>, quindi non esiste il selettore :hover.
:hover e` una pseudoclasse, che va scritta attaccata al selettore dell'elemento che modifica:
a:hover (senza spazio)
PS: piu` che una tabella, quella sembra una lista: per le liste si usano i tag di lista:
<ul> -[*]
[list=1] -[*]
<dl> - <dt> - <dd>
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
grazie 1000 Mich_ !
l'errore era:
a:hover (senza spazio)
adesso funziona!
ancora una cosa...
questo sistema di rollover.. funziona con tutti i browser più usati?
Certo che funziona.
E` il modo corretto per il rollover tramite CSS.
Usando :hover sul tag <a> funziona in tutti i browser in uso (non funziona in NN4 e non so come si comporti IE5.0/5.2)
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
e se volessi cambiare lo sfondo di una cella non potendo inserire nel <td>
un tag <a href>..???
dovrei usare javascript??
mi sapete postare un esempio di codice?
Permessi di invio
Rispondi quotando