rollever img passando su testo... si può?

**Scellino02** · 27-08-2007, 08:52

ciao a tutti... ho una pagina con un codice tipo questo:

codice:

<div>
       	<div>
        <div class="Numeri"><div>[img]images.gif[/img]</div>
        </div>
       	<div class="Titolo">Nome Cognome</div>
     	<div id="BreveNews">Bla Bla Bla</div></div>
     </div>

Tramite css ho creato un effetto di trasparenza al passaggio del mouse sull'immagine che vedete nel codice... l'effetto funziona correttamente!

Ora vorrei sapere se posso in qualche modo vedere l'effetto :hover sull'immagine anche quando passo il mouse sul testo che vedete (Nome Cognome) invece di averlo solo quando passo sull'immagine.
Spero di essere stato abbastanza chiaro!

...secondo voi è fattibile? Se si, come?

Ciao a tutti!

**cavicchiandrea** · 27-08-2007, 10:05

Prova cosi:

codice:

<div>
       	<div>
        <div class="Numeri"><div>[img]images.gif[/img]</div>
        </div>
       	<div class="Titolo">Nome Cognome</div>
     	<div id="BreveNews">Bla Bla Bla</div></div>
     </div>

**Scellino02** · 27-08-2007, 10:24

andrea, ho appena provato... mi sembrava un ottima soluzione... ma purtroppo non funziona!

Per l'immagine ho fatto così:

codice:

[img]images/2.gif[/img]

E nel link, ho fatto come mi hai detto tu:

codice:

<a href="#" onmouseover="document.getElementById('Due').className='OpacityOnTxt';" onmouseout="document.getElementById('Due').className='opacity';" class="Trebuchet16">

Ho creato appositamente la classe OpacityOnTxt ... ma niente, nn funge!
Cosa c'è che non và? ...mi sfugge qualcosa?

**cavicchiandrea** · 27-08-2007, 11:07

prova a togliere id="Due" dall'immagine e metterlo nel div che contiene la stessa, ora sono in ufficio e non posso fare delle prove, ma la strada e quella.

**Scellino02** · 27-08-2007, 11:14

Ancora niente Andrea... continua a non funzionare!
Senti, appena ti liberi, puoi fare qualche prova tu? ...spero di non essere io il problema, mi sembra di aver fatto tutto correttamente! bhoo!

Ciao e grazie per le risposte ehh

**cavicchiandrea** · 27-08-2007, 11:45

Ma da qualche errore? Che brawser usi?

**Scellino02** · 27-08-2007, 11:54

Uso IE7... sto provando con quello, ma chiaramente vorrei funzionasse anche su IE6 e FF

...l'effetto ottenuto sull'immagine tramite css l'ho fatto testare su IE6 e FF e funziona bene... quello che non va è solo questo particolare del rollover sul testo... sul forum html mi hanno detto che la soluzione era in javascript e quindi eccomi quì.

Comunque non dà errore... semplicemente non succede nulla

Ti posto il css, magari individui il problema nel foglio di stile(a me sembra ok!)

codice:

a.opacity img {
	filter:alpha(opacity=20); 
	-moz-opacity: 0.2; 
	opacity: 0.2;
	border:0px;
} 
a.opacity:hover img {
	filter:alpha(opacity=100); 
	-moz-opacity: 1.0; 
	opacity: 1.0;
	border:0px;
}
.OpacityOnTxt img {
	filter:alpha(opacity=100); 
	-moz-opacity: 1.0; 
	opacity: 1.0;
	border:0px;
}

Grazie ancora dell'aiuto!

**cavicchiandrea** · 27-08-2007, 17:18

cosi funziona:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
a.opacity img {
	filter:alpha(opacity=20); 
	-moz-opacity: 0.2; 
	opacity: 0.2;
	border:0px;
} 
a.opacity:hover img {
	filter:alpha(opacity=100); 
	-moz-opacity: 1.0; 
	opacity: 1.0;
	border:0px;
}
.OpacityOnTxt img {
	filter:alpha(opacity=10);
	-moz-opacity: 0.1; 
	opacity: 0.1;
	border:0px;
}
</style>

</head>
<body>
<div id="Due">[img]images/bariera_negativo.png[/img]</div>
alfa
</body>
</html>

Inserendo l'id nel div e impostando opacità meno di 100 (anche perché 100[visibilità piena] 0 [Invisibilità totale])

**Scellino02** · 28-08-2007, 10:20

Andrea, funziona alla grande! Ho fatto anche dei piccoli ritocchi al css e ora è tutto perfetto! Grazie 1000 per l'aiuto!
...Però ora ho un altro problema e mi servirebbe una mano per risolvere! Questo è il codice su cui ho lavorato:

codice:

<div class="">
       	<div id="ContenitoreNewsArchivio">
        <div class="post-numero"><div id="ContNumero">[img]images/2.gif[/img]</div>
        </div>
       	<div class="TitoloNews">BLA BLA BLA BLA</div>
     	<div id="BreveNews">BLA BLA BLA</div></div>
     </div>

Praticamente devo ripetere questo blocco di codice altre 15volte(sto creando una scpecie di elenco) ...ho provato a farlo ma il risultato è stato che al rollover sulle scritte ottengo l'effetto dell'opacità sempre e solo sul primo div con id "ContNumero" mentre su gli altri non succede nulla(giustamente?!?!?)!

Penso sia normale che vada così...
...l'unica soluzione che mi viene in mente è quella di duplicare nel css altre 15 volte la classe "ContNumero" e poi rinominarle tipo ContNumero_1, ContNumero_2, ContNumero_3 ecc ecc

Però mi sembra assurdo perchè in questo modo il mio foglio di stile si appesantirebbe tantissimo... ti viene in mente qualcosa per aiutarmi?

Grazie ancora!

Ciaoooo

**Scellino02** · 28-08-2007, 18:21

:quote:
andrea mi dai una mano?

Discussione: rollever img passando su testo... si può?

Strumenti discussione

Ricerca discussione

Visualizza

rollever img passando su testo... si può?

Permessi di invio