Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript la propriété MozOpacity refuse de s'updater

la propriété MozOpacity refuse de s'updater

4 réponses
Avatar
Laurent Compere
Bonjour,

J'essaie de faire un fade in d'une image. J'ai écris le code ci-dessous qui
est relativement simple et qui est supposé être compatible avec IE6,Firefox
et Netscape.
Ca marche assez bien sous IE mais sous Firefox et Netscape, j'ai le meme
probleme : On dirait que la propriété MozOpacity refuse de se mettre à jour
bien que je puisse lire sa valeur en utilisant le meme referencement. Est
que quelqu'un peut m'expliquer pourquoi ?
En guise de log, j'envoie quelques valeurs en texte de la status bar (voir
le code ci-dessous). Le compteur s'incrémente correctement donc
l'interpréteur passe bien par là mais la valeur de MozOpacity reste tout le
temps la meme. J'ai donc une boucle infinie ...
Merci d'avance pour votre aide ...

----------------------------------------------------

<html>
<head>
<title>Perfect Design</title>
<script src="scripts/splash.js"></script>
<script src="scripts/browserCheck.js"></script>
<link type="text/css" rel="stylesheet" href="styles/splash.css">
</head>
<body onLoad="init()">
<div class="centerBox">
<div class="sousimage">
<img name="fond" src="images/Logo1a.jpg" width="600" height="450">
</div>
<div class="surimage">
<img name="logo" src="images/Logo1b.gif" style="-moz-opacity: -0.05;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);">
</div>
</div>
</body>
</html>

----------------------------------------------------

//<!--

function init() {
window.status = "IE6UP ? " + is_ie6up + " NAV6UP ? " + is_nav6up + " MOZ ?
" + is_moz + " IS_GECKO ? " + is_gecko;
simplePreload( 'images/Logo1a.jpg', 'images/Logo1b.gif' );
setTimeout("increaseOpacity()",150);
}
var i;
function increaseOpacity() {
i = 0;
if (is_ie6up) {
window.status = "ISIE6UP";
increaseOpacityIE();
}
else if (is_nav6up || is_gecko) {
window.status = "ISNAV6UP OU ISGECKO";
increaseOpacityNS();
}
}
function increaseOpacityNS() {
if (document.logo.style.MozOpacity < 1) {
document.logo.style.MozOpacity += 0.05;
window.status = (i++) + ". GECKO opacity = " +
document.logo.style.MozOpacity;
setTimeout('increaseOpacityNS()',150);
}
}
function increaseOpacityIE() {
if (document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity
< 100) {
document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity
+= 5;
window.status = (i++) + ". IE6 opacity = " +
document.logo.filters.item("DXImageTransform.Microsoft.Alpha").opacity;
setTimeout("increaseOpacityIE()",150);
}
}
function simplePreload()
{
var args = simplePreload.arguments;
document.imageArray = new Array(args.length);
for(var i=0; i<args.length; i++)
{
document.imageArray[i] = new Image;
document.imageArray[i].src = args[i];
}
}

//-->
Signaler un problème avec ce contenu

4 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
YD

function increaseOpacityNS() {
if (document.logo.style.MozOpacity < 1) {
document.logo.style.MozOpacity += 0.05;
window.status = (i++) + ". GECKO opacity = " +
document.logo.style.MozOpacity;
setTimeout('increaseOpacityNS()',150);
}
}


Je ne suis pas sûr que document.logo ait un sens pour les navigateurs
Gecko. J'écrirais plutôt :

document.images.logo ou document.images["logo"]

--
Y.D.

Avatar
Laurent Compere
Ca ne marche pas mieux.

document.images.logo produit le meme resultat.
et document.images["logo"] produit une erreur.
Mais merci quand meme.

Le truc bizarre ici, c'est que le fait de referencer
document.logo.style.MozOpacity permet de recuperer la valeur et donc de
l'afficher.
Mais c'est l'affectation qui semble poser probleme. Je n'arrive pas a
changer cette valeur.

"YD" a écrit dans le message de news:
435d1157$0$30100$

function increaseOpacityNS() {
if (document.logo.style.MozOpacity < 1) {
document.logo.style.MozOpacity += 0.05;
window.status = (i++) + ". GECKO opacity = " +
document.logo.style.MozOpacity;
setTimeout('increaseOpacityNS()',150);
}
}


Je ne suis pas sûr que document.logo ait un sens pour les navigateurs
Gecko. J'écrirais plutôt :

document.images.logo ou document.images["logo"]

--
Y.D.



Avatar
YD
Ca ne marche pas mieux.


Ah ? J'ai testé et ça fonctionne avec Fx1.07

document.images.logo produit le meme resultat.
et document.images["logo"] produit une erreur.


Pour javascript ces deux écritures sont strictement équivalentes !

Le truc bizarre ici, c'est que le fait de referencer
document.logo.style.MozOpacity permet de recuperer la valeur et donc de
l'afficher.
Mais c'est l'affectation qui semble poser probleme. Je n'arrive pas a
changer cette valeur.


Désolé. J'avais oublié d'indiquer cette correction nécessaire :
document.images["logo"].style.MozOpacity = +document.images["logo"].style.MozOpacity + 0.05;

Bien noter le + devant la référence à la valeur de l'opacité, pour transformer sa
valeur en Number. Sans cela, javascript effectue une concaténation de chaînes,
la nouvelle valeur 0.050.05 est refusée ne pouvant être convertie.

--
Y.D.

Avatar
Olivier Masson
Ca ne marche pas mieux.



j'ai du faire ça le mois dernier alors je me permets de faire qq remarques :
- MozOpacity n'était jamais utilisé car Opacity (CSS3) renvoyait
toujours 'true' donc ça passait par opacity
- Pour les navigateurs utilisant le moteur Konqueror (comme Safari), tu
as Khtml-opacity
- Pour éviter l'effet flash que tu as à la fin du fade sous Gecko, il
faut que l'opacité finale soit inférieur à 1 (donc, par exemple, 0.99999)
- Gecko (moteur < 1.5) est particuliérement lent pour modifier l'opacité
de grosse zone (un gros div par exemple) même si celle-ci est presque vide.