toolkit/exemples/relations/relations.html
changeset 47 c0b4a8b5a012
equal deleted inserted replaced
46:efd9c589177a 47:c0b4a8b5a012
       
     1 <html>
       
     2 <head>
       
     3 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       
     4 	<title>Utilisation du module Relations</title>
       
     5 	<link rel="stylesheet" type="text/css" media="screen" href="design.css"/>
       
     6 	<script type="text/javascript" src="../libraries/d3/d3.js"></script>
       
     7 	<script type="text/javascript" src="../libraries/pure_min.js"></script>
       
     8 	<script type="text/javascript" src="../libraries/colorbrewer.js"></script>
       
     9 </head>
       
    10 <body>
       
    11 	<h1>Utilisation du module Relations</h1>
       
    12 	
       
    13 	<h2>Coloriage</h2>
       
    14 	<p>
       
    15 		Cliquez sur un des boutons de couleur (Rouge, Vert, Bleu) pour remplir
       
    16 		la zone de dessin.<br/>
       
    17 		Survolez un bouton pour mettre en surbrillance tous les carrés de
       
    18 		la couleur du bouton survolé.
       
    19 	</p>
       
    20 	<div id="coloriage">
       
    21 		<table id="dessin">
       
    22 			<tbody>
       
    23 				<tr></tr>
       
    24 			</tbody>
       
    25 		</table>
       
    26 		
       
    27 		<ul id="couleurs">
       
    28 			<li class="rouge">Rouge</li>
       
    29 			<li class="bleu">Bleu</li>
       
    30 			<li class="vert">Vert</li>
       
    31 		</ul>
       
    32 	</div>
       
    33 	
       
    34 	<h2>Piano (ou presque)</h2>
       
    35 	<p>
       
    36 		Cliquez sur une touche pour l'enfoncer. Cliquez de nouveau dessus
       
    37 		pour la relever.<br/>
       
    38 		Pour relever toutes les touches d'un coup, utiliser le bouton en
       
    39 		dessous.
       
    40 	</p>
       
    41 	<div id="piano">
       
    42 		<ul>
       
    43 			<li>Touche 1</li>
       
    44 			<li>Touche 2</li>
       
    45 			<li>Touche 3</li>
       
    46 			<li>Touche 4</li>
       
    47 			<li>Touche 5</li>
       
    48 		</ul>
       
    49 		
       
    50 		<p>
       
    51 			<button>Appuyer pour relever toutes les touches</button>
       
    52 		</p>
       
    53 	</div>
       
    54 	
       
    55 	<script type="text/javascript" src="../libraries/nco/relations.js"></script>
       
    56 	<script type="text/javascript" src="script.js"></script>
       
    57 </body>
       
    58 </html>