Vous êtes ici: Support du web > Scripts et tutoriaux > Javascript > Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs

Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs
ybouane Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Note : 4/5 (0 vote) Derniéres modifications : 03/04/2009 à 23:10:39 Mots-Clés : changer alpha opacité div bloc elements javascript css html fonction compatible ie ff internet explorer firefox navigateurs changer div opacity filter -moz-opacity -khtml-opacity modifier set_opacity setopacity Bonjour, dans ce script, je vais vous montrer comment changer l'opacité(transparence) de boites(div/élément) en javascript. Pour pouvoir utiliser ce script, il faut d'abord faire la boite(div/élément) et on peut changer son opacité(transparence) en utilisant la fonction set_opacity(id_de_l_element, opacite) set_opacity n'est pas une fonction de base de javascript vous devez donc obligatoirement copier le code javascript ci-dessous pour l'utiliser. Voici les codes: changer_opacite_div.html Code: (X)html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Changer l'opacité d'un élément en javascript</title> <link rel="stylesheet" media="all" title="Style de la page" href="changer_opacite_div.css" /> <script type="text/javascript" src="changer_opacite_div.js"></script> </head> <body> <div class="bloc" id="bloc1"> <img src="image.jpg" alt="Image" /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br /> <span class="pct">100%</span> </div> <script type="text/javascript"> //<!-- set_opacity('bloc1',100); //--> </script> <div class="bloc" id="bloc2"> <img src="image.jpg" alt="Image" /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br /> <span class="pct">75%</span> </div> <script type="text/javascript"> //<!-- set_opacity('bloc2',75); //--> </script> <div class="bloc" id="bloc3"> <img src="image.jpg" alt="Image" /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br /> <span class="pct">50%</span> </div> <script type="text/javascript"> //<!-- set_opacity('bloc3',50); //--> </script> <div class="bloc" id="bloc4"> <img src="image.jpg" alt="Image" /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br /> <span class="pct">25%</span> </div> <script type="text/javascript"> //<!-- set_opacity('bloc4',25); //--> </script> <div class="bloc" id="bloc5"> <img src="image.jpg" alt="Image" /><br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br /> <span class="pct">0%</span> </div> <script type="text/javascript"> //<!-- set_opacity('bloc5',0); //--> </script> </body> </html> changer_opacite_div.css Code: CSS body { background:url('arriere_plan.gif'); } .bloc { text-align:center; width:190px; border:1px solid black; background-color:#E0E0E0; float:left; margin:10px; padding:5px; } .pct { font-size:28px; } changer_opacite_div.js Code: JavaScript function set_opacity(id, opacity) { el = document.getElementById(id); el.style["filter"] = "alpha(opacity="+opacity+")"; el.style["-moz-opacity"] = opacity/100; el.style["-khtml-opacity"] = opacity/100; el.style["opacity"] = opacity/100; return true; } Essayer j'espère que vous avez aimé ce script et qu'il vous sera utile. merci Scripts et tutoriaux similaires à celui ci: Faire un input file stylé en Css (X)html et Javascript Afficher/Cacher un div(element) en javascript Background scrollable avec overflow:auto; sous firefox (X)html/CSS Modifier le curseur en image ou curseurs proposés en CSS/(X)html Faire un calendrier en javascript avec un effet de transparence Changer Alpha (Opacité/Transparence) d'un symbole en flash, ActionScript 2 et 3 Faire des onglet en (X)html/CSS [Windows]Changer la lettre d'un lecteur - Modifier lettre disque dur Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par SnakerLips le 15/09/2009 à 17:08:30 Merci, Envoyé par widi70 le 15/02/2011 à 12:16:38 Bonjour et merci pour ce code .... j'ai un petit problème avec firefox, j'ai : 2 div : DIV1 visible et DIV2 hidden apres un onclick la div1 prend 25 opacité et la div2 apparait Mais ça ne fonctionne pas la div1 se met bien à 25 mais la div2 aussi, et le problème n'est que sur Firefox tout est ok pour IE. Voici mon code : function Montrer() { document.getElementById("div2").style.visibility="visible"; document.getElementById('div1').style.display='block'; changeOpac(25,'div1'); } function changeOpac(opacity, id) { var object = document.getElementById(id).style; object.opacity = Math.sin(opacity / 100); object.MozOpacity = Math.sin(opacity / 100); object.KhtmlOpacity = Math.sin(opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; } Merci de votre aide Envoyé par wkgmjxtx le 24/01/2012 à 12:30:02 20 Envoyé par kefran le 12/08/2012 à 19:34:40 merci, du temps de gagné, c'est sympa Envoyé par MlPrWTLhN le 06/09/2012 à 05:14:15 Thanks for sahrnig. Always good to find a real expert.

Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs

ybouane

Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs
Note : 4/5 (0 vote)
Derniéres modifications : 03/04/2009 à 23:10:39
Mots-Clés : changer alpha opacité div bloc elements javascript css html fonction compatible ie ff internet explorer firefox navigateurs changer div opacity filter -moz-opacity -khtml-opacity modifier set_opacity setopacity

Bonjour,
dans ce script, je vais vous montrer comment changer l'opacité(transparence) de boites(div/élément) en javascript.

Pour pouvoir utiliser ce script, il faut d'abord faire la boite(div/élément) et on peut changer son opacité(transparence) en utilisant la fonction set_opacity(id_de_l_element, opacite)

set_opacity n'est pas une fonction de base de javascript vous devez donc obligatoirement copier le code javascript ci-dessous pour l'utiliser.

Voici les codes:

changer_opacite_div.html

Code: (X)html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Changer l'opacit&eacute; d'un &eacute;l&eacute;ment en javascript</title>

        <link rel="stylesheet" media="all" title="Style de la page" href="changer_opacite_div.css" />

        <script type="text/javascript" src="changer_opacite_div.js"></script>

    </head>

    <body>

        <div class="bloc" id="bloc1">

            <img src="image.jpg" alt="Image" /><br />

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />

            <span class="pct">100%</span>

        </div>

        <script type="text/javascript">

        //<!--

            set_opacity('bloc1',100);

        //-->

        </script>

        <div class="bloc" id="bloc2">

            <img src="image.jpg" alt="Image" /><br />

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />

            <span class="pct">75%</span>

        </div>

        <script type="text/javascript">

        //<!--

            set_opacity('bloc2',75);

        //-->

        </script>

        <div class="bloc" id="bloc3">

            <img src="image.jpg" alt="Image" /><br />

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />

            <span class="pct">50%</span>

        </div>

        <script type="text/javascript">

        //<!--

            set_opacity('bloc3',50);

        //-->

        </script>

        <div class="bloc" id="bloc4">

            <img src="image.jpg" alt="Image" /><br />

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />

            <span class="pct">25%</span>

        </div>

        <script type="text/javascript">

        //<!--

            set_opacity('bloc4',25);

        //-->

        </script>

        <div class="bloc" id="bloc5">

            <img src="image.jpg" alt="Image" /><br />

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta.<br />

            <span class="pct">0%</span>

        </div>

        <script type="text/javascript">

        //<!--

            set_opacity('bloc5',0);

        //-->

        </script>

    </body>

</html>

changer_opacite_div.css

Code: CSS

body

{

        background:url('arriere_plan.gif');

}

.bloc

{

        text-align:center;

        width:190px;

        border:1px solid black;

        background-color:#E0E0E0;

        float:left;

        margin:10px;

        padding:5px;

}

.pct

{

        font-size:28px;

}

changer_opacite_div.js

Code: JavaScript

function set_opacity(id, opacity)

{

        el = document.getElementById(id);

        el.style["filter"] = "alpha(opacity="+opacity+")";

        el.style["-moz-opacity"] = opacity/100;

        el.style["-khtml-opacity"] = opacity/100;

        el.style["opacity"] = opacity/100;

        return true;

}

Essayer

j'espère que vous avez aimé ce script et qu'il vous sera utile.
merci

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par SnakerLips le 15/09/2009 à 17:08:30

Merci,

Envoyé par widi70 le 15/02/2011 à 12:16:38

Bonjour et merci pour ce code ....
j'ai un petit problème avec firefox, j'ai :
2 div : DIV1 visible et DIV2 hidden
apres un onclick la div1 prend 25 opacité et la div2 apparait

Mais ça ne fonctionne pas la div1 se met bien à 25 mais la div2 aussi, et le problème n'est que sur Firefox tout est ok pour IE.

Voici mon code :
function Montrer() {
document.getElementById("div2").style.visibility="visible";
document.getElementById('div1').style.display='block';
changeOpac(25,'div1');
}

function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = Math.sin(opacity / 100);
object.MozOpacity = Math.sin(opacity / 100);
object.KhtmlOpacity = Math.sin(opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

Merci de votre aide

Envoyé par wkgmjxtx le 24/01/2012 à 12:30:02

Envoyé par kefran le 12/08/2012 à 19:34:40

merci, du temps de gagné, c'est sympa

Envoyé par MlPrWTLhN le 06/09/2012 à 05:14:15

Thanks for sahrnig. Always good to find a real expert.