<script type="text/javascript">
var color = 'red'; // default color
var columns = 77; // number of colums (X)
var rows = 50; // number of rows (Y)
var mouse = 0; // pressed mouse button
// register onLoad event with anonymous function
window.onload = function (){
table_create(); // create HTML table
table_events(); // attach event on table cells
// disable drag event for IE
document.body.ondragstart = function(e){return false}
// attach event handlers for onMouseDown and onMouseUp on drawing_table div element
document.getElementById('drawing_table').onmousedown = mousedown;
document.getElementById('drawing_table').onmouseup = function(e){mouse = 0}
}
// onMouseDown handler (attached to drawing_table div and td elements)
function mousedown(e){
// define event
var evt = e || window.event;
// needed for FF to disable dragging
if (evt.preventDefault) e.preventDefault();
// set pressed mouse button
if (evt.which) mouse = evt.which;
else mouse = evt.button;
// colorize pixel on mousedown event for TD element
if (this.tagName == 'TD' && mouse == 1) this.style.backgroundColor = color;
}
// create table HTML and attach to the div container
function table_create(){
var tbl = ''; // initialize table string
// open loops to create table rows and table cells
for (var i=0; i<rows; i++){
tbl = tbl + '<tr>';
for (var j=0; j<columns; j++) tbl = tbl + '<td></td>';
tbl = tbl + '</tr>\n';
}
// get reference to the drawing table div and attach created table
var div = document.getElementById('drawing_table');
div.innerHTML = '<table cellspacing="0" cellpadding="0">' + tbl + '</table>';
}
// add events to table cells
function table_events(){
// collect table cells from the drawing_table div element
var td = document.getElementById('drawing_table').getElementsByTagName('td');
// attach onMouseDown and onMouseOver event for collected table cells
for (var i=0; i<td.length; i++){
td[i].onmousedown = mousedown;
// colorize table cell if left mouse button is pressed
td[i].onmouseover = function (e){if (mouse == 1) this.style.backgroundColor = color}
}
}
// set color (input parameter is the reference of the colored table cell)
function set_color(obj){
color = obj.style.backgroundColor;
var tbl = document.getElementById('drawing_table').firstChild;
tbl.style.borderColor = color;
}
</script>
<div id="drawing_table"></div>
<div id="colors">
<table>
<tr>
<td style="background-color: black" onclick="set_color(this)"></td>
<td style="background-color: gray" onclick="set_color(this)"></td>
<td style="background-color: silver" onclick="set_color(this)"></td>
<td style="background-color: white; border: 1px solid #ddd;" onclick="set_color(this)"> </td>
<td style="background-color: red" onclick="set_color(this)"></td>
<td style="background-color: purple" onclick="set_color(this)"></td>
<td style="background-color: fuchsia" onclick="set_color(this)"></td>
<td style="background-color: green" onclick="set_color(this)"></td>
<td style="background-color: lime" onclick="set_color(this)"></td>
<td style="background-color: olive" onclick="set_color(this)"></td>
<td style="background-color: yellow" onclick="set_color(this)"></td>
<td style="background-color: orange" onclick="set_color(this)"></td>
<td style="background-color: blue" onclick="set_color(this)"></td>
<td style="background-color: navy" onclick="set_color(this)"></td>
<td style="background-color: teal" onclick="set_color(this)"></td>
<td style="background-color: aqua" onclick="set_color(this)"></td>
</tr>
</table>
