113 en ligne Comparateur | Sites | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre  

 Recherche

 Newsletter





 

NoteBook en HTML

Code HTML par gselles


  <Accueil>  Déjà 692 codes ! 
AJAX [5]AS 2.0 [1]ASP [111]ASP.NET [34]CSharp [11]CSS [14]
D [1]Delphi [5]DHTML [3]Divers [5]HTML [16]JavaScript [154]
JSP [9]Maths [1]PHP [254]PHP5 [18]PowerShell [22]Regex [4]
SQL [2]V.Basic [4]VBScript [11]VS.NET [5]WPF [1]XML [1]


gsellesHTML - NoteBook en HTML

Simulation d'un Notebook en HTML, dans l'exemple un carnet composé de 5 feuilles

HTML
Pour pouvoir le télécharger, connectez-vous ! ;)
<html>
<head>
<title>NoteBook</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<script language="JavaScript" type="text/JavaScript">
   function hide()
   {
      var names = new Array('base','map1','map2','map3','map4','map5');
      var names1 = new Array("b_general","b_style","b_consigne","b_ecran","b_impression");
      var lgth = names.length;
      for (var i=0;i<lgth;i++)
      {
         document.getElementById(names[i]).style.visibility = 'hidden';
      }
      lgth = names1.length;
      for (var i=0;i<lgth;i++)
      {
         var bi = document.getElementById(names1[i]);
         bi.setAttribute("bgcolor", "yellow");
      }
   }

   function show(el,btn_name)
   {
      var bi = document.getElementById(btn_name);
      hide();
      document.getElementById('base').style.visibility = 'visible';
      document.getElementById(el).style.visibility = 'visible';
      bi.setAttribute("bgcolor", "red");
   }
</script>

  <!-- Ecriture indispensable d'une <div> vide -->
  <div id="base" style="position:absolute; left:50px; right:50px; top: 50px; visibility: hidden;">
  </div>

  <!-- 1° feuille du carnet -->

  <div id="map1" style="position:absolute; left:50px; right:50px; top: 50px; visibility: hidden;">
  <FIELDSET> <LEGEND ALIGN=CENTER>Général</LEGEND>
    <fieldset> <legend align=left> Nombre de lignes</legend>
      <select name='v_numlig' value='2'>

     <option  value='2'>2</option>
     <option  value='3'>3</option>
     <option  value='4'>4</option>
     <option  value='5'>5</option>
     <option  value='6'>6</option>
     <option  value='7'>7</option>

     <option  value='8'>8</option>
     </select>
    </fieldset>
    <fieldset> <legend align=left> Nombre de colonnes</legend>
      <select name='v_numcol' value='2'>
     <option  value='2'>2</option>

     <option  value='3'>3</option>
     <option  value='4'>4</option>
     <option  value='5'>5</option>
     <option  value='6'>6</option>
     <option  value='7'>7</option>
     <option  value='8'>8</option>

     </select>
    </fieldset>
    <fieldset> <legend align=left> Délai d'attente</legend>
      <select name='v_numdelay' value='3'>
     <option  value='1'>1</option>
     <option  value='2'>2</option>

     <option  value='3'>3</option>
     <option  value='4'>4</option>
     <option  value='5'>5</option>
     <option  value='6'>6</option>
     <option  value='7'>7</option>
     <option  value='8'>8</option>

     </select>
    </fieldset>
    <fieldset> <legend align=left> Nombre de parties</legend>
      <select name='v_numshoot' value='1'>
     <option  value='1'>1</option>
     <option  value='2'>2</option>

     <option  value='3'>3</option>
     <option  value='4'>4</option>
     <option  value='5'>5</option>
     <option  value='6'>6</option>
     <option  value='7'>7</option>
     <option  value='8'>8</option>

     </select>
    </fieldset>
</FIELDSET>
    <center>
      <table width=100% border=0 cellpadding=0 cellspacing=0>
        <tr>
          <td align=center><input type="submit" value="Test" name="bouton_test"></td>
          <td align=center><input type="submit" value="Enregistrer" name="bouton_enregistrer"></td>
          <td align=center><input type="submit" value="Problème" name="bouton_probleme"></td>

          <td align=center><input type="submit" value="Quitter" name="bouton_quitter"></td>
          <td align=center><input type="submit" value="Aide" name="bouton_aide"></td>
        </tr>
      </table>
    </center>
</div>


  <!-- 2° feuille du carnet -->

<div id="map2" style="position:absolute; left:50px; right:50px; top: 50px; visibility: hidden;">

<FIELDSET><LEGEND ALIGN=CENTER>Styles</LEGEND>
    <fieldset> <legend align=left> Choix du Style</legend>
     <table border=0>
       <tr>
         <td>
          <font face="Comic Sans MS,Arial, Helvetica, Geneva" size=2>
            <input type=radio name='mem_style' value='0'>&nbsp;Images&nbsp;

         </font>
         </td>
         <td>
           <select name='mem_img_list'>
</html>
<option value='0'>&nbsp;$ressources/dir_images/xpm61&nbsp;</option><option value='1'>&nbsp;$ressources/dir_images/xpm61/code_route&nbsp;</option><option value='2'>&nbsp;$ressources/dir_images/xpm61/objets&nbsp;</option><option value='3'>&nbsp;$ressources/dir_cartes&nbsp;</option><html>
           </select> <br>

         </td>
       </tr>
       <tr>
         <td>
            <input type=radio name='mem_style' value='1'>&nbsp;Images & Textes&nbsp;
         </td>
         <td>
           <select name='mem_img_txt_list'>

</html>
<option value='0'>&nbsp;$ressources/dir_images/xpm61&nbsp;</option><option value='1'>&nbsp;$ressources/dir_images/xpm61/code_route&nbsp;</option><option value='2'>&nbsp;$ressources/dir_images/xpm61/objets&nbsp;</option><option value='3'>&nbsp;$ressources/dir_cartes&nbsp;</option><html>
           </select> <br>
         </td>
       </tr>
       <tr>
         <td>

            <input type=radio name='mem_style' value='2'>&nbsp;Images & Sons&nbsp;
         </td>
         <td>
           <select name='mem_img_snd_list'>
</html>
<option value='0'>&nbsp;$ressources/dir_images/xpm61&nbsp;</option><option value='1'>&nbsp;$ressources/dir_images/xpm61/code_route&nbsp;</option><option value='2'>&nbsp;$ressources/dir_images/xpm61/objets&nbsp;</option><option value='3'>&nbsp;$ressources/dir_cartes&nbsp;</option><html>
           </select> <br>

         </td>
       </tr>
       <tr>
         <td>
            <input type=radio name='mem_style' value='3'>&nbsp;Lettres & Nombres&nbsp;
         </td>
       </tr>
       <tr>

         <td>
            <input type=radio name='mem_style' value='4'>&nbsp;Présentation fractionnaire&nbsp;
         </td>
       </tr>
       <tr>
         <td>
            <input type=radio name='mem_style' value='5'>&nbsp;Mélange d'opérations
         </td>
       </tr>

       <tr>
         <td>
            <input type=radio name='mem_style' value='6'>&nbsp;Lettres/Nombres & Son&nbsp;
         </td>
       </tr>
       <tr>
         <td>
            <input type=radio name='mem_style' value='7'checked>&nbsp;Couleurs&nbsp;

         </td>
         <td>
           <select name='mem_color_list'>
</html>
<option value='0'>&nbsp;base_16.plt&nbsp;</option><option value='1'>&nbsp;base_4.plt&nbsp;</option><option value='2'>&nbsp;base_8.plt&nbsp;</option><option value='3'>&nbsp;base.plt&nbsp;</option><option value='4'>&nbsp;base.RC&nbsp;</option><option value='5'>&nbsp;coloriage1.plt&nbsp;</option><option value='6'>&nbsp;coloriage.plt&nbsp;</option><option value='7'>&nbsp;huit.plt&nbsp;</option><option value='8'>&nbsp;palette_12.plt&nbsp;</option><option value='9'>&nbsp;palette_6.plt&nbsp;</option><option value='10'>&nbsp;palette de base.plt&nbsp;</option><option value='11'>&nbsp;seize.plt&nbsp;</option><option value='12'>&nbsp;toto.plt&nbsp;</option><option value='13'>&nbsp;xterm.plt&nbsp;</option><option value='14'>&nbsp;XXX.plt&nbsp;</option><html>

           </select> <br>
         </td>
         <td>
          <a>Taille des cellules</a>
           <select name='mem_color_size'>
         <option value=''>&nbsp;&nbsp;32&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;40&nbsp;&nbsp;</option>

         <option value=''>&nbsp;&nbsp;48&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;56&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;64&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;72&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;80&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;88&nbsp;&nbsp;</option>

         <option value=''>&nbsp;&nbsp;96&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;104&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;112&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;120&nbsp;&nbsp;</option>
         <option value=''>&nbsp;&nbsp;128&nbsp;&nbsp;</option>
           </select>

         </td>
       </tr>
     </table>
    </fieldset>
    <fieldset> <legend align=left> Style de la police</legend>
      <input type=radio name='mem_police' value='0'checked>Script
      <input type=radio name='mem_police' value='1'>Cursif
      <input type=radio name='mem_police' value='2'>Fantaisie
    </fieldset>

    <fieldset> <legend align=left> Nom de la couleur des lettres</legend>
      <input type=radio name='mem_color_lett' value='0'checked>Noir
      <input type=radio name='mem_color_lett' value='1'>Rouge
      <input type=radio name='mem_color_lett' value='2'>Bleu
    </fieldset>
</FIELDSET>
    <center>
      <table width=100% border=0 cellpadding=0 cellspacing=0>
        <tr>

          <td align=center><input type="submit" value="Test" name="bouton_test"></td>
          <td align=center><input type="submit" value="Enregistrer" name="bouton_enregistrer"></td>
          <td align=center><input type="submit" value="Problème" name="bouton_probleme"></td>
          <td align=center><input type="submit" value="Quitter" name="bouton_quitter"></td>
          <td align=center><input type="submit" value="Aide" name="bouton_aide"></td>
        </tr>
      </table>
    </center>
</div>

  <!-- 3° feuille du carnet -->


<div id="map3" style="position:absolute; left:50px; right:50px; top: 50px; visibility: hidden;">
<FIELDSET><LEGEND ALIGN=CENTER>Consigne</LEGEND>
    <fieldset>
      <input type=checkbox name='date_consigne' value='A'>Date<br>
    </fieldset>
    <fieldset> <legend align=left> Style de la Consigne</legend>

      <input type=radio name='v_consigne' value='0'>Son<br><br>
     <input type=file name='consigne_snd' value=''><br>
      <input type=radio name='v_consigne' value='1'>Texte<br><br>
     <input type=file name='consigne_txt' value=''><br><br>
      <input type=radio name='v_consigne' value='2'>Pas de consigne
    </fieldset>
</FIELDSET>
    <center>
      <table width=100% border=0 cellpadding=0 cellspacing=0>

        <tr>
          <td align=center><input type="submit" value="Test" name="bouton_test"></td>
          <td align=center><input type="submit" value="Enregistrer" name="bouton_enregistrer"></td>
          <td align=center><input type="submit" value="Problème" name="bouton_probleme"></td>
          <td align=center><input type="submit" value="Quitter" name="bouton_quitter"></td>
          <td align=center><input type="submit" value="Aide" name="bouton_aide"></td>
        </tr>
      </table>
    </center>

</div>

  <!-- 4° feuille du carnet -->

<div id="map4" style="position:absolute; left:50px; right:50px; top: 50px; visibility: hidden;">
<FIELDSET><LEGEND ALIGN= CENTER>Écran</LEGEND>
    <fieldset> <legend align=left> Taille de l'écran</legend>
      <input type=radio name='v_screen' value='0' checked>Automatique<br><br>
      <input type=radio name='v_screen' value='1'>1024x768<br><br>

      <input type=radio name='v_screen' value='2'>800x600<br><br>
      <input type=radio name='v_screen' value='3'>640x480
    </fieldset>
    <fieldset> <legend align=left> Fond d'écran</legend>
      <input type=radio name='v_background' value='0'>Nom du fichier de fond<br><br>
     <input type=file name='background_file' value=''><br>
      <input type=radio name='v_background' value='1'>Nom de la couleur de fond<br><br>

     <input type=file name='background_color' value=''>
    </fieldset>
</FIELDSET>
    <center>
      <table width=100% border=0 cellpadding=0 cellspacing=0>
        <tr>
          <td align=center><input type="submit" value="Test" name="bouton_test"></td>
          <td align=center><input type="submit" value="Enregistrer" name="bouton_enregistrer"></td>
          <td align=center><input type="submit" value="Problème" name="bouton_probleme"></td>

          <td align=center><input type="submit" value="Quitter" name="bouton_quitter"></td>
          <td align=center><input type="submit" value="Aide" name="bouton_aide"></td>
        </tr>
      </table>
    </center>
</div>

  <!-- 5° feuille du carnet -->

<div id="map5" style="position:absolute; left:50px; right:50px; top: 50px; visibility: hidden;">
<FIELDSET><LEGEND ALIGN=CENTER>Impression</LEGEND>

    <fieldset>
      <input type=checkbox name='print_convert_HTML' value='1' checked>Convertir en fichier HTML<br>
    </fieldset>
    <fieldset> <legend align=left>Titre de la Page</legend>
     <textarea cols=72 rows=1 name='print_title'></textarea>
    </fieldset>
    <fieldset> <legend align=left> Nom du fichier contenant la consigne à afficher</legend>

     <input size=60 type=file name='print_file_name' value=''><br>
    </fieldset>
    <fieldset> <legend align=left>Texte de la consigne sans  fichier</legend>
     <textarea cols=72 rows=5 name='print_csg_txt'></textarea>
    </fieldset>
    <fieldset> <legend align=left> Nom générique du fichier à produire</legend>

     <input size=60 type=file name='print_generic' value=''><br>
    </fieldset>
</FIELDSET>
    <center>
      <table width=100% border=0 cellpadding=0 cellspacing=0>
        <tr>
          <td align=center><input type="submit" value="Test" name="bouton_test"></td>
          <td align=center><input type="submit" value="Enregistrer" name="bouton_enregistrer"></td>
          <td align=center><input type="submit" value="Problème" name="bouton_probleme"></td>

          <td align=center><input type="submit" value="Quitter" name="bouton_quitter"></td>
          <td align=center><input type="submit" value="Aide" name="bouton_aide"></td>
        </tr>
      </table>
    </center>
</div>
<form name="form1" id="form1" method="post" action="">
    <!-- Table contenant les boutons simulant un NoteBook  -->
    <CENTER>
      <TABLE WIDTH=100% BORDER=1 VSPACE=0 CELLPADDING=0 CELLSPACING=0 FRAME=BOX RULES=COLS>

        <TR VSPACE=0 bgcolor=yellow>
          <TD id="b_general" bgcolor=yellow WIDTH=20% ALIGN=CENTER>
          <a onClick="show('map1','b_general')">Général</a>
          </TD>
          <TD id="b_style" bgcolor=yellow WIDTH=20% ALIGN=CENTER>
          <a onClick="show('map2','b_style')">Styles</a>
          </TD>
          <TD id="b_consigne" bgcolor=yellow WIDTH=20% ALIGN=CENTER>

          <a onClick="show('map3','b_consigne')">Consigne</a>
          </TD>
          <TD id="b_ecran" bgcolor=yellow WIDTH=20% ALIGN=CENTER>
          <a onClick="show('map4','b_ecran')">Écran</a>
          </TD>
          <TD id="b_impression" bgcolor=yellow WIDTH=20% ALIGN=CENTER>
          <a onClick="show('map5','b_impression')">Impression</a>

          </TD>
        </TR>
      </TABLE>
    </CENTER>
</form>
</body>
</html>

Proposé par gselles le 05/12/2007 [vu 2163 fois]
Commentaires

Pour participer, il faut d'abord vous identifier !
284 visiteurs ont déjà participé dont :
DB77 [47]fmarie [26]Fabrice69 [25]CedX [23]Didier [22]
Bisou [20]tedheu [20]mohman [17]jreaux62 [16]romuluslepunk [15]
foxmaster [15]Vonscott [12]iubito [10]Redo [9]Balin [8]
poppy [7]fmaunier [6]cyrillus [6]pseudomenace [6]CrazyCat [5]
antoun [5]Pozzy [5]TBliss [5]Aurelien [5]daoudi [5]
Ours [5]bahdot [5]david96 [5]houcem_tsp [4]Chrigou [4]
debackp [4]lex [4]hyoucef [4]Jips [4]zut69 [3]
salem [3]berguerand01 [3]phenixbd [3]twins20 [3]kandal [3]
mhaido [3]mcorgnet [3]philouonline [3]master-killer [3]Maclearner [3]
crocxx [3]laetyboop [3]Poucet [3]olivierland94 [3]
Didier Gratuit !!! Téléchargez la Beta d'Office 2010 !
35% de réduction sur Windows 7 !

Au fil des news  
Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 6
Pour continuer dans le même style, je vous propose une suite au précédent article. Rechercher tous ...
Adobe - Adobe Photoshop.com Mobile pour iPhone 1.1
JavaScript - Ajouter une page dans vos favorites
Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 5 -
Je vous propose cette fois deux astuces. Comment exporter une feuille de style avec l'aide de ...
SharePoint Personalization Site Links - Les liens personnalisés des MySite SharePoint
Nous avons vu dans les articles précédents comment agrémenter les pages de recherche afin de ...
Magazines - Le n°126 de Programmez est disponible
Outils - Traducteur en ligne automatique pour site web
Adobe - Adobe Photoshop.com Mobile pour Iphone
Magazines - Le n°125 de Programmez est disponible
Adobe - Adobe AIR 2 et Flash Player 10.1version bêta
Les conférences autour des technologies Microsoft - Liste non exhaustive des grands évènements
Nous allons essayer de regrouper un grand nombre des évènements autour des technologies Microsoft ...
Magazines - Le n°124 de Programmez est disponible
PHP - Forum PHP 2009
Composants - eFace - XAML en Java
WPF - Désactiver le bouton de réduction d'une fenêtre
Magazines - Le n°123 de Programmez est disponible
Magazines - Le n°122 de Programmez est disponible
Auditer une ferme SharePoint - Assurer le bon fonctionnement de SharePoint
Dans le cadre de la bonne gestion de son environnement SharePoint, il est utile de faire un ...
SQL Server 2008 Report Builder 2.0 - Installation et utilisation de Report Builder 2.0
Dans le cadre de la création de rapports pour SQL Server Reporting Services 2008, un outil est ...
Magazines - Le HS N° 1 de Web Design est disponible
Adobe - Adobe propose en Open Source les frameworks.....
Outils - EntityBuilder
CSharp - Sérialisation XML de vos objets
Magazines - Le n°121 de Programmez est disponible
Adobe - Adobe annonce MAX 2009 !
Outils - WhoIs
[MAJ] Dreamweaver MX + Php + MySql - Les formulaires - partie 3
Mise à jour du code, par DB 77, affichage du code erreur, dans la page erreur.php, traduction des ...
PHP - News avec photo - Système de gestion - affichage
Gestion - Administration - Affichage d'une "News", "Actualité", "Info", ... avec : - mise en forme ...
Outils - Crypt
Dreamweaver Php Mysql - Région répétée imbriquée
Je rebondis, sur un post du forum, pour vous montrer comment obtenir grâce à l'extension Simulated ...
Magazines - Le n° 120 de Programmez est disponible
Gérer les bases de contenu SharePoint - Gérer la croissance du volume des données
Dans le cadre de la gestion quotidienne de ferme SharePoint, il existe une partie qu'il faut ...
PHP - Le Coach PHP sur Visual Studio
.NET - Ecrire une application .NET utilisant MySQL
PHP - Utilisation de PHP dans le monde Microsoft
Magazines - Le n° 119 de Programmez est disponible
Adobe - Adobe annonce Photoshop Marketplace
[MAJ] Tutoriel AJAX simple - En avant vers le WEB2.0
Mis à jour le 20/04/2009
Captcha «maison» sans extension - Et en plus, c'est gratuit ;)
Un ami m'a demandé de l'aide ce matin pour insérer un captcha dans un formulaire pour son site ...
Dreamweaver CS4 - Photoshop CS4 - Alliance parfaite pour la gestion des images
Pour changer un peu des pages de code, je vous propose de voir ensemble, la fonctionnalité très ...
  Tutorial : HTML | Scripting | ASP-PHP | ASP.net | SQL Server | XML
Sharepoint | XAML | Pocket | Dreamweaver | VML | Divers
  Scripts : Scripting | ASP-PHP | ASP.net | Divers
  Boutique | Annuaire | Bannières | Météo | Tribune | Partenariats | Recherches 		v4.3 © Didier YVER
2001-2010 
 

Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces
TechNet ASP-magazine MVP Groupes Utilisateurs Microsoft DotNet Project