Apparition progressive d'une image avec IE
Chris
-
chrisss -
chrisss -
Bonjour tout le monde,
Comme indiqué dans le titre je recherche à faire apparaitre une image progressivement. Je l'ai déjà fait avec firefox :
<body bgcolor="caba9c">
<a href="presentation.php"><img src="2.png" style="-moz-opacity:0 name="img" border="0" align="center" id='img1'></a>
<br>
<script language="javascript">
var actif = setInterval("opac()",250);
var i = 0.99;
function opac() {
if(i <= 0 ){
window.clearInterval(actif);
}
document.getElementById('img1').style.MozOpacity=1-i;
i = i-0.1;
}
</script>
</body>
Le problème c'est que cela ne fonctionne pas avec IE.. Quelqu'un pour m'aider?
Comme indiqué dans le titre je recherche à faire apparaitre une image progressivement. Je l'ai déjà fait avec firefox :
<body bgcolor="caba9c">
<a href="presentation.php"><img src="2.png" style="-moz-opacity:0 name="img" border="0" align="center" id='img1'></a>
<br>
<script language="javascript">
var actif = setInterval("opac()",250);
var i = 0.99;
function opac() {
if(i <= 0 ){
window.clearInterval(actif);
}
document.getElementById('img1').style.MozOpacity=1-i;
i = i-0.1;
}
</script>
</body>
Le problème c'est que cela ne fonctionne pas avec IE.. Quelqu'un pour m'aider?
A voir également:
- Apparition progressive d'une image avec IE
- Image iso - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Rechercher avec une image - Guide
6 réponses
A mon avis, tu devrais utiliser une librairie JS qui encapsule déjà ce type de traitement, genre Jquery et ses fonctions fadeIn et fadeOut qui gèrent le code et la compatibilité cross navigateur.
https://api.jquery.com/fadeIn/
https://api.jquery.com/fadeIn/
Bien d'accord. Soit ça, soit les bibliothèques YUI.
Tu vas voir, une fois qu'on apprend à jouer avec ça, on ne veut presque plus faire de JS par soi-même ! ;)
Tu vas voir, une fois qu'on apprend à jouer avec ça, on ne veut presque plus faire de JS par soi-même ! ;)
Mais sinon, pour une solution rapide...
En plus du moz-opacity, ajoute un attribut opacity dans ton css, ou joue avec les filters. Je n'ai pas actuellement la formule exacte, mais fais une recherche google, tu vas trouver facilement. Ce ne sont pas des moyens nécessairement "approuvés" par le W3C, mais ça devrait fonctionner. N'oublie pas d'adapter ton JS aussi !
En plus du moz-opacity, ajoute un attribut opacity dans ton css, ou joue avec les filters. Je n'ai pas actuellement la formule exacte, mais fais une recherche google, tu vas trouver facilement. Ce ne sont pas des moyens nécessairement "approuvés" par le W3C, mais ça devrait fonctionner. N'oublie pas d'adapter ton JS aussi !
Il n'y a pas un moyen simple d'effectué cela? j'ai cherché et cherché et rien trouvé de concret et simple à la fois..
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je crois que l'attribut opacity fonctionne sous tous les navigateurs principaux même si c'est déprécié.
Remplace simplement tous tes -moz-opacity par un simple opacity. D'après moi ça devrait marcher. Pour mettre transparent, mets "opacity:0;". Pour rendre visible : "opacity:1". Pour 50%, c'est "opacity:0.5;".
Remplace simplement tous tes -moz-opacity par un simple opacity. D'après moi ça devrait marcher. Pour mettre transparent, mets "opacity:0;". Pour rendre visible : "opacity:1". Pour 50%, c'est "opacity:0.5;".