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
<!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
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;
}Essayer
j'espère que vous avez aimé ce script et qu'il vous sera utile.
merci
Scripts et Tutoriels similaires
Le 03/04/2009 à 23:10:39
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