paint
/Html JavaSript/Inutile/paint.html
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>"Paint"</title>
<style type="text/css">
table {
border-collapse:collapse;
}
td {
border:solid 1px black;
width:5px;
height:5px;
}
</style>
<script type="text/javascript">
var CC="#FFFFFF"; // couleur courante (en variable globale)
var CrayonPose=false; // Pour savoir si le crayon est posé sur la feuille
function setC(Couleur) {
CC = Couleur;
document.getElementById("PotCourant").style.backgroundColor = CC;
}
</script>
</head>
<body>
Palette :
<table>
<tr>
<td style="width:20px;height:20px; background-color:red"
onClick="setC(this.style.backgroundColor)"></td>
<td style="width:20px;height:20px; background-color:green"
onClick="setC(this.style.backgroundColor)"></td>
<td style="width:20px;height:20px; background-color:blue"
onClick="setC(this.style.backgroundColor)"></td>
<td style="width:20px;height:20px; background-color:yellow"
onClick="setC(this.style.backgroundColor)"></td>
</tr>
</table>
Couleur Courante :
<table>
<tr>
<td id="PotCourant" style="width:20px;height:20px;"></td>
</tr>
</table>
<br/><br/>
<table>
<script type="text/javascript">
// ecrit 50 lignes de 50 cellules
var lig, col;
for (lig=0; lig<50; lig++) {
document.write("<tr>");
for (col=0; col<50; col++) {
document.write("<td onMouseDown='CrayonPose=true' onMouseUp='CrayonPose=false' onMouseOver='if(CrayonPose)this.style.backgroundColor=CC'></td>");
}
document.write("</tr>");
}
</script>
</table>
</body>
</html>