Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
[JS/HTML]L'infoBox !
Auteur Message
Répondre en citant
Message [JS/HTML]L'infoBox ! 
Hello I'm back ! Mr. Green
Voici un petit travail que j'ai fait en rentrant de vacance "Ll'infoBox", tout est expliquer dans le code source ci-dessous :

Code:
<html>

<!--

         InfoBox HTML/JS par Gautier019
         
Le but d'une InfoBox est comme son nom l'indique de
transmettre une info via une "boite de dialogue"
(Info - Box), celle-ci peut-être trés utile ! N'
oubliez pas qu'il n'est possible de mettre qu'une
seule InfoBox par page (du moins avec ce script), car
sinon cela engendre des probléme au niveaux des "id"
qui serront identiques.

Tout les lignes qui nécéssite une modification
comporte "<!->" (avec plus de tirets mais si je
le fais sa ferme le commentaire ici).

N'oubliez pas de mettre le lien liés à l'information
délivrée ou à enlever le "<div>" qui comporte la
fléche s'il n'existe aucun lien référenciel.
-->


<head>
   <style>
   /* Faire en sorte d'enlever les sauts de lignes automatiques avec les "div" */
      div #InfoBoxTitr{display:inline;}
      div #InfoBoxRedu{display:inline;}
      div #InfoBoxView{display:inline;}
      div #InfoBoxQuit{display:inline;}
      div #InfoBoxHelp{display:inline;}   
      div #InfoBoxAgra{display:inline;}
      
   /* Code CSS de la "Fenêtre" en elle-même */   
      #InfoBox{margin:5px;}
      #InfoBoxFen{position:absolute;background-color:#31B404;font-family:consolas;border:solid 2px black;}
      
   /* Code CSS de la "Barre d'état" en elle-même */   
      #InfoBoxBar{border:solid 1px black;background-color:gray;cursor:default;}
   
   /* Code CSS des boutons de la Box*/   
      #InfoBoxRedu{border:solid 1px black;cursor:pointer;}
      #InfoBoxView{border:solid 1px black;cursor:pointer;}
      #InfoBoxQuit{border:solid 1px black;cursor:pointer;}
      #InfoBoxHelp{border:solid 1px black;cursor:help;}
      
   /* Pour la Box en mode réduite */   
      #InfoBoxLittle{position:absolute;left:0;bottom:0;font-family:consolas;display:none;}
      #InfoBoxAgra{border:solid 1px black;cursor:pointer;}
   </style>
   
   <script>
      function InfoBoxRedu() {
         document.getElementById("InfoBoxFen").style.display="none";
         document.getElementById("InfoBoxLittle").style.display="block";
      }
      
      function InfoBoxAgra() {
         document.getElementById("InfoBoxLittle").style.display="none";
         document.getElementById("InfoBoxFen").style.display="block";
      }
      
      function InfoBoxQuit() {
         document.getElementById("InfoBoxFen").style.display="none";
      }
      
      function InfoBoxHelp() {
         alert("L'InfoBox est comme une fenêtre sur votre ordinateur à quelques détails prêt !\rLa barre \"-\" serre à réduire l'InfoBox qui serra en bas à gauche et le \"O\" serre à la faire réaparraître,la fléche \"->\" permet d'accéder au lien liés \rà l'information et la croix \"X\" à fermer l'InfoBox.");
      }
   </script>
</head>

<body>
   <div id="InfoBoxFen">
      <div id="InfoBoxBar">
<!---->            <div id="InfoBoxTitr">Titre/Nom de l'InfoBox</div>
         <div id="InfoBoxRedu" OnClick="InfoBoxRedu()">&nbsp;-&nbsp;</div><div id="InfoBoxView"><a href="http://leliendelinfo" target="_blank">&nbsp;->&nbsp;</a></div><div id="InfoBoxQuit" OnClick="InfoBoxQuit()">&nbsp;X&nbsp;</div><div id="InfoBoxHelp" OnClick="InfoBoxHelp()">&nbsp;?&nbsp;</div>
      </div>
      <div id="InfoBox">
<!---->         Message de l'InfoBox
      </div>
   </div>
   
   <div id="InfoBoxLittle">
<!---->         <div id="InfoBoxBar">Titre/Nom de l'InfoBox<div id="InfoBoxAgra" OnClick="InfoBoxAgra()">&nbsp;O&nbsp;</div></div>
   </div>
</body>

</html>


Un petit exemple :

Code:
<body>
   <div id="InfoBoxFen">
      <div id="InfoBoxBar">
<!---->            <div id="InfoBoxTitr">L'infoBox publiée !</div>
         <div id="InfoBoxRedu" OnClick="InfoBoxRedu()">&nbsp;-&nbsp;</div><div id="InfoBoxView"><a href="http://batch.xoo.it/t3626-JS-HTML-L-infoBox.htm#p27066" target="_blank">&nbsp;->&nbsp;</a></div><div id="InfoBoxQuit" OnClick="InfoBoxQuit()">&nbsp;X&nbsp;</div><div id="InfoBoxHelp" OnClick="InfoBoxHelp()">&nbsp;?&nbsp;</div>
      </div>
      <div id="InfoBox">
<!---->         L'InfoBox HTML/JS de gautier019 a<br>
            été publiée sur le site batch.xoo.it !
      </div>
   </div>
   
   <div id="InfoBoxLittle">
<!---->         <div id="InfoBoxBar">L'infoBox publiée !<div id="InfoBoxAgra" OnClick="InfoBoxAgra()">&nbsp;O&nbsp;</div></div>
   </div>
</body>




Skype
Message Publicité 
PublicitéSupprimer les publicités ?


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch