Evidenziare un link immagine

[Balamb Seed]

Salve a tutti

nel sito che sto sviluppando ho dei link di immagine che devo evidenziare in qualche modo al passaggio del mouse.

navigando per la rete ho trovato una soluzione interessante basata sui css che riduceva leggermente l'opacità dell'immagine ripristinandola al passaggio de mouse

posto il codice del css

.evidenzia img { opacity: .50; -moz-opacity: .50; -webkit-opacity: .50;}
.evidenzia img:hover { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1;}

il problema è che questo codice funziona benissimo con firefox ma non con ie (anche il sito da cui ho preso spunto ha lo stesso problema)

c'è qualche guru che può consigliarmi? grazie in anticipo

[Balamb Seed]

forse sono vicino alla soluzione:

ho fatto qualche ricerca in più sul metodo opacity e ho scoperto che ie non lo supporta quindi seguendo le istruzioni del sito ho modificato il mio css in questo modo

#evidenzia img {opacity: .80; 
                      filter:alpha(opacity=80); 
                      filter:"alpha(opacity=80)"; }

#evidenzia img:hover {opacity: 1; 
                               filter:alpha(opacity=100); 
                               filter:"alpha(opacity=100)";}

dove la prima riga serve per tutti i browser, la seconda per ie6 e la terza per ie7/8
(evito di dirvi cosa sto pensando in questo momento di ie )

il problema è che come al solito su firefox va tutto, al contrario in ie nonostante le 2 versioni il codice dell'hover non funziona con il risultato che le immagini sono sbiadite, ma anche se ci passo sopra con il mouse non cambiano.

ie ti odio

[manurat]

Qui forse c'è la soluzione per te..

Ad ogni modo io affronterei in modo diverso il problema, ad esempio impostando la tua stessa immagine come sfondo di un link definito a livello di blocco e sostituendola all'hover sul link stesso.

[Balamb Seed]

si avevo già letto quella pagina, ne ho trovata anche una in ita ma nonostante tutto il mio css non da ancora l'effetto desiderato

per l'altra soluzione non credo di aver capito bene quello che intendi... dici che devo usare 2 immagini? ma come posso fare a scambiarle?

inoltre queste immagini sono in una tabella che ha uno sfondo, non è che con quel sistema mi sovrappongo al bg della tabella?

[manurat]

queste immagini sono in una tabella che ha uno sfondo, non è che con quel sistema mi sovrappongo al bg della tabella?

Beh qualsiasi elemento della pagina va ovviamente a sovrapporsi allo sfondo..forse non ho capito quello che intendi?

per l'altra soluzione non credo di aver capito bene quello che intendi... dici che devo usare 2 immagini? ma come posso fare a scambiarle?

Vedi se riesci a prendere spunto da qui:

http://forum.html.it/forum/showthread/t-973968.html

[Balamb Seed]

intendevo dire che lo sfondo del link non deve modificare l'estetica ma penso che usando delle gif con sfondo trasparente non ci siano problemi

grazie per il link
ho dato solo una sbirciata veloce per ora ma dovebbe esserci qualcosa che mi può essere utile.

ci guardo meglio più tardi e poi ti aggiorno

[Balamb Seed]

allora
innanzitutto scusate il ritardo della mia risposta ma ultimamente ho dovuto fare altre cose e questo problema è finito un po' nel cassetto...

ho provato a seguire il tuo consiglio e ho cercato di riprodurre lo stesso effetto utilizzando la proprietà :hover dei css

in pratica nel css ho inserito:

img.rollover {{background: url(immaginigenerali/blizzard.gif);}

img.rollover:hover {background: url(immaginigenerali/blizzardroll.gif);}

e nell'html:

[img]immaginigenerali/spazio.gif[/img]

dove spazio.gif è una gif trasparente che mi serve solo a dare la dimensione per il background.

seguendo questo metodo funziona tutto con firefox ma l'effetto non funziona con ie

ho spostato la proprietà sul tag "a" invece che "img" e il risultato è che su ie funziona ma su firefox mi taglia le immagini a metà

ho provato anche ad inserire la proprietà su entrambi i tag il risultato è che su ie funziona ma su firefox al passaggio del mouse l'effetto risulta sdoppiato...

ragazzi dove sto sbagliando?? help please

[vdesigns]

Io utilizzo questa tecnica:

Creo un immagine che ha sia la parte on che quella over, solitamente una sotto l'altra e poi applico questo CSS

#bar1 a {display:block; width: 79px; height: 84px; background: url(percorso immagine) 0 0 repeat; margin: 0; padding: 0; } 
#bar1 a:hover {background-position: 0 -84px; }

Come vedi faccio vedere subito una porzione di immagine alta 84px e successivamente l'altra parte alta sempre 84px.

[Balamb Seed]

è una tecnica diversa altrettanto valida

però non risolve il mio problema
infatti io non ho problemi a visualizzare l'effetto (quello funziona) il problema è che su ie funziona solo con i tag attivi (come a) e se uso a in firefox mi taglia l'immagine perchè tiene conto dell'altezza di a e non di quella dell'immagine

viceversa se applico il css a img in firefox funziona ma in ie no perchè img non reagisce al passaggio del mouse quindi anche se le immagini vengono visualizzate correttamente in ie non si vede l'effetto rollover

:master:

[Balamb Seed]

ragazzi per ora ho risolto con un jscript (soluzione che non volevo adottare, ma dovevo metterci una pezza in tempi brevi)

però mi piacerebbe capire come fare con i css... possibile che quello che funziona in ie non va in firefox? sembra che facciano apposta!!!

poveri illusi quelli che credevano che la guerra dei browser fosse finita con netscape