1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
Dismiss Notice
Welcome to our Education website, plz like our page facebook to support us. Thank You and wish you good navigation

Opacity en CSS

abdelouafiOct 4, 2016

    1. abdelouafi

      abdelouafi Administrator Staff Member

      Messages:
      399
      Likes Received:
      9
      Trophy Points:
      18
      Joined
      Sep 13, 2016
      Opacity en CSS
      code source de la page index.html :

      Code:
      <html>
      <head>
      <link rel="stylesheet" type="text/css" href="mon_style.css">
      <title> </title></head>
      <body>
      
      <!-- <img src="image3.jpg" width="600" class="im"></img>-->
      <img src="image3.jpg" width="400" ></img>
      <div class="divi">
      <img src="image3.jpg" width="400" ></img>
      </div>
      </body>
      </html>
      Code source de la page nommée mon_style.css :


      Code:
      body{
      background-color:red;
      margin:0px;
      /*margin-top:
      margin-left:*/
      }
      .im{
          visibility:visible;            /*hidden;*/
          opacity:0.5;                /* mozila nouvelle version , safari,opera,netscape, chrome...*/
          -moz-opacity:0.5;            /*mozila ancienne version*/
          filter:alpha(opacity:80);  /*Interner Explorer*//*la valeur est compris ente0 et 100*/
      }
      .divi{
      position:absolute;
      left:200px;
      top:100px;
      width:200px;
      height:100px;
      /*overflow:auto;*/
      filter:alpha(opacity=50);
      z-index:1;
      }
      Exemple 2:


      Code:
      <html>
      <head>
          <script language="javascript">
          function xhr(){
              try{xhr=new XMLHttpRequest();}//Mozilla, chrome, Safari, Netscape ...
              catch(e){
                  try{xhr=new ActiveXObject("Microsoft.XMLHTTP");} //IE
                  catch(e1){
                          alert("Objet non supporté");
                          }
                      }
                   
                      xhr.onreadystatechange=function(){
                          if(xhr.readyState==4)
                              alert(xhr.responseText);     
                                                      }
                      xhr.open("get","imp.txt",true);
                      xhr.send("null");
                   
                      }
          </script>
      </head>
      <body>
      <div id="divi"></div>
          <input type="button" value="tester" onclick="xhr()">
      </body>
      </html>


      Exercice 3:
      Code:
      <html>
      <head>
          <script language="javascript">
          function xhr(){
              try{xhr=new XMLHttpRequest();}//Mozilla, chrome, Safari, Netscape ...
              catch(e){
                  try{xhr=new ActiveXObject("Microsoft.XMLHTTP");} //IE
                  catch(e1){
                          alert("Objet non supporté");
                          }
                      }
                   
                      xhr.onreadystatechange=function(){
                          if(xhr.readyState==5)
                              document.getElementById("divi").innerHTML=xhr.responseText;
                              else
                              document.getElementById("divi").innerHTML="Veuillez patienter svp...";
                                                      }
                      xhr.open("get","imp.txt",true);
                      xhr.send("null");
                   
                      }
          </script>
      </head>
      <body>
      <div id="divi" color="red" border="2"></div>
          <input type="button" value="tester" onclick="xhr()">
      </body>
      </html>

      TP Ajax:


      Code:
      <html>
      <head>
          <script language="javascript">
              function xhr(){
                  if (window.ActiveXObject)
                      alert (" votre navigateur supporte Activex")
                  else {
                          if (window.XMLHttpRequest)
                              alert (" votre navigateur supporte XMLHTTPREQUEST")
                              }
                          }
          </script>
      </head>
      <body>
          <input type="button" value="tester" onclick="xhr()">
      </body>
      </html>

      Exercice Ajax / PHP
      Code:
      <?php
      header("Content-Type:text/html;charset=ISO-8859-1");
      $a=$_POST["a"];
      $b=$_POST["b"];
      mysql_connect("localhost","root","");
      mysql_select_db("ensa");
      mysql_query("insert into inscription (nom,prenom) values('$a','$b')");
      
      mysql_connect("localhost","root","");
      mysql_select_db("ensa");
      $req=mysql_query("select * from inscription");
      while($tab=mysql_fetch_array($req)){
          $id=$tab["id"];
          $date=$tab["date"];
          $nom=$tab["nom"];
          $prenom=$tab["prenom"];
          echo "$id - $date - $nom - $prenom <br>";
      }
      ?>
      <html>
          <head>
              <script language="javascript">
                  function xhr(){
                      try {xhr=new XMLHttpRequest();} // Mozilla, Chrome, Safari, Netscape...
                      catch(e){
                          try {xhr=new ActiveXObject("Microsoft.XMLHTTP");} // IE
                          catch(e1){
                              alert("Objet non supporté!");
                          }
                      }
                   
                      xhr.onreadystatechange=function(){
                          if(xhr.readyState==5)
                          document.getElementById("divi").innerHTML=xhr.responseText;
                          else
                          document.getElementById("divi").innerHTML="<img src='loading.gif'>";
                      }
                      xhr.open("post","monfichier.php",true);
                      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                      xhr.send("a="+document.getElementById("a").value+"&b="+document.getElementById("b").value);
                   
                   
                      }
              </script>
          </head>
          <body>
              <input type="text" id="a"><br>
              <input type="text" id="b"><br>
              <input type="button" value="Calculer" onClick="xhr()"><br>
              <div id="divi"></div><br><br>
          </body>
      </html>

       
      Last edited: Dec 23, 2016
      Loading...

Share This Page

Share