Opacity, onmouseover e cross-browser

**Vespa 2** · 16-03-2010, 21:45

Ciao ragazzi!!
Credo di aver letto valanghe di post per cercare la soluzione al mio problema..
Peccato che non riesca ad arrivare ad un punto d'arrivo..

Allora..Premetto che quello che voglio fare è un effetto opacity su di una immagine (pulsante di un menù)..

Con IE tutto funziona regolarmente..
Con Firefox non c'è verso di fare funzionare l'effetto..

Se possibile non vorrei usare i .css..Però (se qualcuno mi dice come

) lo uso volentieri..

Il mio fine sarebbe quello di fare il tutto seguendo un criterio di cross-browser valido sia per IE che per FF che per Safari..

Mi date una mano?
Come cribbio faccio a mettere a posto questo codice?

Eccolo:

<HTML>
<HEAD>
<script language="JavaScript1.2">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)", 50)
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=50; opacity: 0.5
}

function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=25;
else if (window.highlighting)
clearInterval(highlighting)
}
</script>
...
...
...

Ed ecco il pulsante con l'effetto che vorrei avere:

<table border="0" align="left">
<tr><td align="center">Menù</td></tr>

<tr><td>[img]./images/home.gif[/img]</td></tr>
...
...
...

Come dicevo in IE è tutto ok..
In FF sono riuscito semplicemente riuscito ad opacizzare l'immagine, ma quando ci passo sopra con il mouse non succede nulla...!!!!

Grazie a tutti!!

**Vespa 2** · 17-03-2010, 12:27

Proprio nessuno che sappia risolvere il mio codice?

Urca..Pensavo fosse possibile fare una cosa del genere..

**mirimadesign** · 17-03-2010, 12:58

ciao, non so se hai già risolto il tuo problema....io ho fatto un effetto opacity sulle immagini nel mio sito, se è quello che intendi....però l'ho fatto con css, se può essere utile fammi sapere..

**Vespa 2** · 17-03-2010, 14:32

Certo che mi sarebbe utile!!

L'unica cosa è che mi dovresti proprio scrivere sia il codice del .css (presumo esterno)..Sia la riga di comando sull'immagine nell'index che vorrei fare con l'onmousover+l'opacity.. :master:

Grazie 1000!!

**miki003** · 17-03-2010, 16:49

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css" media="screen"><!--
a.trasparenza img {
		filter:alpha(opacity=50);
		-moz-opacity: 0.5;
		opacity: 0.5;
}
a.trasparenza:hover img {
		filter:alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
}
-->
</style>
</head>

<body>
[img]immagine.jpg[/img]
</body>
</html>

**mirimadesign** · 17-03-2010, 17:41

ciao!

css

a.opacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.opacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

html

nell'html non fai altro che mettere la class opacity alle immagini che vuoi, così quando ci passi sopra diventano opache...

**Vespa 2** · 17-03-2010, 17:56

Perfetto ragazzi!!

Siete stati gentilissimi!!

Ora funziona tutto!!
Sia con IE che con Firefox !!

Grazie, grazie, grazie!!

**miki003** · 17-03-2010, 19:21

Originariamente inviato da mirimadesign
ciao!

css

a.opacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.opacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

html

nell'html non fai altro che mettere la class opacity alle immagini che vuoi, così quando ci passi sopra diventano opache...

Ma gli hai dato la stessa cosa che gli ho dato io!!! Che bisogno ce n'era?

**mirimadesign** · 17-03-2010, 19:41

sì è vero..più o meno...il mio è al contrario del tuo...comunque va beh..fa lo stesso..

**sandroacchiardi** · 11-06-2010, 11:21

negli esempi sopra avveniva l'opacità al passaggio del mouse
io voglio mettere che l'immagine sia sempre opaca

<div class=box_off>
<img src=prova.jpg width=400>
</div>

nel css

.box_off {

filter:alpha(opacity=15);
-moz-opacity:.15;
opacity:.15;
padding-top:8px;
padding-left:8px;
}

funzione su IE ma no su mozilla; che errore vde mozilla?

Discussione: Opacity, onmouseover e cross-browser

Strumenti discussione

Ricerca discussione

Visualizza

Opacity, onmouseover e cross-browser

effetto opacity

effetto opacity

Re: effetto opacity

effetto opacity

opacity

Permessi di invio