11486 sujets

JavaScript, DOM et API Web HTML5

Opacité : compatible multi navigateur ?

Bonjour, j'ai besoin de changer l'opacité d'une image.

J'ai fait ce code : 

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Notes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
    <link type="text/css" rel="stylesheet" href="styles.css" />
    <script language="javascript" type="text/javascript">
        <!--    
            var DefaultNote = 6;
                    
            function Note(n) 
            {
                for (var i=0; i < 11; i++ )
                    SetOpacity(document.getElementById("Note").getElementsByTagName("img")[i], 10);
                
                if (n == null)
                {
                    for (var j=0; j < DefaultNote + 1; j++ )
                        SetOpacity(document.getElementById("Note").getElementsByTagName("img")[j], 60);
                }
                for (var j=0; j < n + 1; j++ )
                    SetOpacity(document.getElementById("Note").getElementsByTagName("img")[j], 100);
            }

            function SetOpacity(elem, opacity)
            {
                elem.style.filter= "alpha(opacity=" + opacity + ")"; /* IE */
            }

            function window_onload() 
            {
                Note();
            }
        -->   
    </script>
</head>
<body onload="javascript:window_onload()">
    <div id="Note">
        Notes<br />
		<img src="Images/star.gif" alt="0/10" onmouseover="javascript:Note(0)" onmouseout="javascript:Note()" /><img
			src="Images/star.gif" alt="1/10" onmouseover="javascript:Note(1)" onmouseout="javascript:Note()" /><img
			src="Images/star.gif" alt="2/10" onmouseover="javascript:Note(2)" onmouseout="javascript:Note()" /><img 
			src="Images/star.gif" alt="3/10" onmouseover="javascript:Note(3)" onmouseout="javascript:Note()" /><img 
			src="Images/star.gif" alt="4/10" onmouseover="javascript:Note(4)" onmouseout="javascript:Note()" /><img 
			src="Images/star.gif" alt="5/10" onmouseover="javascript:Note(5)" onmouseout="javascript:Note()" /><img 
			src="Images/star.gif" alt="6/10" onmouseover="javascript:Note(6)" onmouseout="javascript:Note()" /><img 
			src="Images/star.gif" alt="7/10" onmouseover="javascript:Note(7)" onmouseout="javascript:Note()" /><img 
			src="Images/star.gif" alt="8/10" onmouseover="javascript:Note(8)" onmouseout="javascript:Note()" /><img 
			src="Images/star.gif" alt="9/10" onmouseover="javascript:Note(9)" onmouseout="javascript:Note()" /><img 
			src="Images/star.gif" alt="10/10" onmouseover="javascript:Note(10)" onmouseout="javascript:Note()" />
	</div>
</body>
</html>


Bien sur celui ne fonctionne seulement sur IE, j'aimerais savoir si je peux le rendre compatible multi-navigateur, j'ai vu ca sur le forum :



filter:alpha(opacity=50);
-moz-opacity:0.5;


d'une je ne vois pas comment je peux faire pour mettre des attributs rien que pour IE ou mozilla, et puis il n'y a pas qu'eux ! existe il un moyen pour tout les autres ?

Merci
[/i]
Salut,
si tu fais une recherhe sur le forum, tu trouvera un topic qui en parle et qui énumère les solutions possibles.
Merci de ta réponse.
Oui, j'ai fait une recherche sur un des posts ce code.


img {
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Mozilla */
-khtml-opacity: 0.5; /* Safari */
opacity: 0.5; /* CSS3 */
}


ce que je voudrais savoir :

1. Est on obligé de définir l'opacité pour chaque navigateur ?

2. Si oui, je n'ai pas encore trouvé un script javascript me trouvant les differentes version

3. Comment je peux faire pour rajouter les styles via JS pour Safari et FireFox ?

4. Avec quelle navigateur est-ce exactement compatible

5. C'est pas un peu crade de mettre l'attribut opacity dans une feuille de style CSS2 ?

Je sais que j'en demande un peu beaucoup, mais une petite piste m'aiderait
Smiley smile

Merci
Bonjour,

1. Oui

2. Pas besoin de JS

3. Pas besoin

4. Cherche dans les tableaux de correspondances

5. Un peu mais bon....

Perso je l'ai mis en place sur cette page et cela marche pas trop mal de facon générale. Sauf sous FF, c'est un peu lourd sur le roll....

Bonne journée
Merci de ta réponse, maismon problème n'est pas reglé pour autant.

Si tu regardes le code de la page, tu pourras voir que je suis obligé de passer par javascript, car il faut que les images précedentes changent elles aussi d'opacité.
Au pire pour ce problème, je pourrais faire ca via CSS, il me semble qu'il doit y avoir une fonction pour selectionner tous les noeuds avant ?

Mais il faut aussi lorsque je sors du bouton, que cela me mette une valeur par défaut et la en CSS je ne peux pas.

De plus, je prefere éviter de mettre un <a autour d'une image, j'essaye de faire le maximum d'optimisation Smiley smile

Je suis donc obligé de passer par du javascript Smiley confus et je ne sais pas comment modifier ce style spécifique à mozilla et Safari ...

Pour ce qui est du choix des navigateurs, si tu connais une fonction qui me permet de savoir si oui ou non l'opacité est supporté en ajoutant le style, je suis preneur

mais ma question principale est comment modifier ce style via javascript
J'ai trouvé une solution :


            function SetOpacity(elmt, opacity)
            {
			if(document.getElementById)
				{
					if(document.all)
						elmt.filters.alpha.opacity=opacity
					else
						elmt.style.setProperty("-moz-opacity", opacity/100, "");
						elmt.style.setProperty("-khtml-opacity", opacity/100, "");
				}
            }
Méfis-toi de document.all pour identifier IE car Opera connais aussi document.all !

Dans ton cas, il vaudrais mieux faire :


function SetOpacity(elmt, opacity){
  if(elmt.filters){
    elmt.filters.alpha.opacity=opacity
  }else{
    elmt.style.setProperty("-moz-opacity", opacity/100, "");
    elmt.style.setProperty("-khtml-opacity", opacity/100, "");
    elmt.style.setProperty("opacity", opacity/100, "");
  }
}
Sujet clos
Aller à