Programmation ⇒ javascript facebook twitter youtube

Changer l'opacité d'un div | Changer l'opacité d'un div


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)

changer_opacite_div.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>
       
        <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

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

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;
}

 

 





>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces