toolkit/exemples/relations/relations.html
author Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
Fri, 18 Apr 2014 14:31:58 +0200
changeset 51 79833eaa394a
parent 47 c0b4a8b5a012
permissions -rw-r--r--
set up second level for navigation

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Utilisation du module Relations</title>
	<link rel="stylesheet" type="text/css" media="screen" href="design.css"/>
	<script type="text/javascript" src="../libraries/d3/d3.js"></script>
	<script type="text/javascript" src="../libraries/pure_min.js"></script>
	<script type="text/javascript" src="../libraries/colorbrewer.js"></script>
</head>
<body>
	<h1>Utilisation du module Relations</h1>
	
	<h2>Coloriage</h2>
	<p>
		Cliquez sur un des boutons de couleur (Rouge, Vert, Bleu) pour remplir
		la zone de dessin.<br/>
		Survolez un bouton pour mettre en surbrillance tous les carrés de
		la couleur du bouton survolé.
	</p>
	<div id="coloriage">
		<table id="dessin">
			<tbody>
				<tr></tr>
			</tbody>
		</table>
		
		<ul id="couleurs">
			<li class="rouge">Rouge</li>
			<li class="bleu">Bleu</li>
			<li class="vert">Vert</li>
		</ul>
	</div>
	
	<h2>Piano (ou presque)</h2>
	<p>
		Cliquez sur une touche pour l'enfoncer. Cliquez de nouveau dessus
		pour la relever.<br/>
		Pour relever toutes les touches d'un coup, utiliser le bouton en
		dessous.
	</p>
	<div id="piano">
		<ul>
			<li>Touche 1</li>
			<li>Touche 2</li>
			<li>Touche 3</li>
			<li>Touche 4</li>
			<li>Touche 5</li>
		</ul>
		
		<p>
			<button>Appuyer pour relever toutes les touches</button>
		</p>
	</div>
	
	<script type="text/javascript" src="../libraries/nco/relations.js"></script>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>