Css

[jackweb]

Salve ragazzi!!!
Come si fa un rollover con i css impostando le immagini come sfondo del box? Io ci ho provato ma credo di aver impunemente inventato del codice........

[Martin_fly]

A {
FONT-SIZE: 12px;
COLOR: WHITE ;
TEXT-DECORATION: underline;
font-weight: NORMAL;
background-image: url(images/immagine.jpg);
}

A:hover {
FONT-SIZE: 12px;
COLOR: green;
TEXT-DECORATION: underline;
font-weight: NORMAL;
background-image: url(images/immagine-rollover.jpg);

}

[jackweb]

Ok...fin qui ci sono....grazie ....
ma se volessi associarlo ad un id?
E' possibile???


#bianco{height:115px;
width:101 px;
background:url(mwa/pop2.gif) no-repeat;
margin-top:-270 px;
margin-left:200 px; }


<div id="bianco"></div>

[delfina blu]

Originariamente inviato da jackweb
Ok...fin qui ci sono....grazie ....
ma se volessi associarlo ad un id?
E' possibile???


#bianco{height:115px;
width:101 px;
background:url(mwa/pop2.gif) no-repeat;
margin-top:-270 px;
margin-left:200 px; }


<div id="bianco"></div>

Per fare come dici tu ci vuole il puntino davanti e puoi richiamarlo dove vuoi:
.bianco
{ height:115px;
width:101 px;
background:url(mwa/pop2.gif) no-repeat;
margin-top:-270 px;
margin-left:200 px;
}

[jackweb]

Ho provato a fare così.....ma con scarsi risultati:

div.bianco{height:115px;
width:101 px;
background:url(mwa/pop2.gif) no-repeat;

margin-top:-270 px;
margin-left:200; }

div.bianco:hover{background:url(mwa/pop8.gif) no repeat; }

<div class="hover"></div>

..... ma sono convinto di sbagliare!!!
Vorrei proprio riuscire a capire come funzia un rollover di sfondo...

[Marcolino's]

Col puntino crei una classe, col cancelletto un identificativo di classe (id).
Comunque:

.classetd {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: Maroon;
text-decoration: none;
text-align : right;
background-color : transparent;
}
.classetd a {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: Black;
/* Questo è il colore del link */
display: block;
/* Fondamentale! Da impostare sempre */
text-decoration: none;
/* Eliminiamo la sottolineatura del link */
text-align: right;
font-weight : normal;
background-color : transparent;
}
.classetd a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: Red;
/* Cambiamo il colore del link al passaggio del mouse */
background-color: #00BFFF;
/* Cambiamo il colore di sfondo al passaggio del mouse */
text-decoration: none;
text-align: right;
font-weight : normal;
}
.classetd a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: Red;
/* Cambiamo il colore del link al passaggio del mouse */
background-color: #A9A9A9;
/* Cambiamo il colore di sfondo al passaggio del mouse */
text-decoration: none;
text-align: right;
font-weight : normal;
}


-- Creata questa classe --
la applichi così:

<table>
  <tr> 
    <td class="classetd" width="100%">
     homepage
    </td>
  </tr>
</table>

Considerà che l'effetto rollover qui è ottenuto con i colori di sfondo, ma basta applicare le immagini per ottenere l'effetto che vuoi tu.
Una nota: la classe è applicata alla cella e non all'ancora.
Per questo si chiama classetd

L'effetto lo vedi nel menù di questo sito

[jackweb]

Ho capito come dici, ora sto tentando di adattarlo alle mie esigenze ma....
non funziona nemmmeno così.....


.bianco{height:115px;
width:101 px;
background:url(mwa/pop2.gif) no-repeat;
margin-top:-270 px;
margin-left:200;

}
.bianco:hover{height:115px;
width:101 px;
background-image:url(mwa/pop.gif) no-repeat;
margin-top:-270 px;
margin-left:200;

}

<div class="bianco"></div>

La prima immagine funziona ma del rollover nemmeno l'ombra....
Bisognerà associarlo x forza al tag <a>????

[jackweb]

Mi spiego meglio.....
...questo rollover di SFONDO (impostandolo come background) all'interno del box è un fatto puramente estetico....non deve essere un link a una pagina....
....per questo mi chiedevo se è necessario associare il css al tag <a>...!Ma la cosa che mi preme di + è capire ed imparare come si fa........sia con con id o la costituzione di classi!

[jackweb]

Mi spiego meglio.....
...questo rollover di SFONDO (impostandolo come background) all'interno del box è un fatto puramente estetico....non deve essere un link a una pagina....
....per questo mi chiedevo se è necessario associare il css al tag <a>...!Ma la cosa che mi preme di + è capire ed imparare bene come si fa........sia con con id o la costituzione di classi e soprattutto sapere se esiste questa limitazione di associarlo per forza ad <a> oppure se è possibile farne a meno!