on mouse over su immagini con i css

[moonba]

buongiorno a tutti,ho cercato sul web info ma non ne ho trovate esaustive.la domanda è questa,vorrei applicare effetto mouse hover sull'immagine rappresentativa di un sito che sto facendo,quindi al passaggio del mouse cambiare l'immagine stessa.ecco volevo sapere se era possibile fare ciò esclusivamente con i css.
ringrazio anticipatamente

[Mich_]

E` possibile. Si devono usare le pseudoclassi.

Esempio (funzionante nei brwoser standard):
[img]...[/img]

img.effetto {
  cursor: default;
}
img.effetto:hover {
  cursor: crosshair;
}

Altro esempio (funzionante anche in IE):
[img]...[/img]

.effetto img {
  cursor: default;
}
.effetto:hover img {
  cursor: crosshair;
}

[moonba]

io ho una struttura di questo tipo:

<div id="topcontainer">
<h1>immagine</h1>
.....
</div>


quindi l'immagine rappresentativa del sito è racchiusa come sfondo nell'elemento h1

in questo caso posso comportarmi nella stessa maniera?
ti chiedo gentilmente questo ecco.

[Mich_]

Ti stai contraddicendo. Se l'immagine e` uno sfondo, non e` compresa tra <h1> e </h1>.

Esempio (funzionante nei browser standard):
<h1>Testo del titolo</h1>

h1 {
  background: url(path/nome.jpg);
  cursor: default;
}
h1:hover {
  cursor: crosshair;
}

[moonba]

hai ragione:
il codice xhtml è questo:
<div id="topcontainer">
<h1>titolo</h1>
.....
</div>

l'iimmagine è di sfondo all'elemento h1 e non è contenuta tra <h1> e </h1>

il css è quello che mi hai scritto ok,in questo caso posso chiederti invece come è il codice xhtml.
ti ringrazio tanto.

[Mich_]

il css è quello che mi hai scritto ok,in questo caso posso chiederti invece come è il codice xhtml

Non capisco questa frase.
(comunque spero che sei riuscito a risolvere: venerdi` non c'ero ed ho visto solo ora che chiedevi qualcos'altro)

[moonba]

ho risolto.ti ringrazio

[andreac_fe]

Approfitto di questo Thread per chiedere una cosa sempre riguardo alla pseudoclasse :HOVER.

E' possibile che se nella classe non è definita nessuna immagine ma solo nella pseudo classe quest'ultima non sia visibile quando il mouse passa sopra alla voce?

Per spiegarmi meglio: ho creato una classe che definisce altre proprietà e poi nella pseudoclasse aggiungo pure una immagine di sfondo. Bene questa non si vede quando ci passo sopra con il mouse.

Grazie

Andrea

[Mich_]

Potrebbe essere un problema di precaricamento: l'immagine non e` presente in cache, quindi all'evento :hover il browser deve chiedere l'immagine al server, e questo puo` richiedere alcuni secondi (sempre che il server risponda).

Converrebbe usare un'immagine grande, che comprende le due immagini, di cui una e` uno sfondo omogeneo o un pezzo trasparente (se l'immagine e` .gif o .png).
Vedi gli articoli sul rollover (sono citati tra i "link utili" del forum).

Pero` la mia e` solo una supposizione: la mancanza di immagini di sfondo puo` essere dovuta ad altri fattori, tipo un errore nel path (piuttosto comune).

[andreac_fe]

Grazie Mich_,

il preload non l'avevo considerato. Adesso voglio provare anche con una gif trasparente nello stato normale.

Grazie

Andrea