Thanks for the help guys!! Here is the code....
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Drawing Program</title>
<style type="text/css">
/* #canvas selects the elemnet with id="canvas" */
#canvas{
width: 400px;
border: 1px solid #999999;
border-collapse: collapse;
}
td{
width: 4px;
height: 4px;
}
th.key{
font-family: arial, helvetica, sans-serif;
font-size: 12px;
border-bottom: 1px solid #999999;
}
</style>
<script type="text/javascript">
<!--
//initialization function to insert cells into the table
function createCanvas() {//======================================================
var side = 100;
//IE will not dynamically (i.e. in script) append rows directly to a <table> but will do so to a <tbody>
var tbody = document.getElementById("tablebody");
for (var i = 0; i < side; i++) {
var row = document.createElement("tr"); // row is reused to reference each new row
for (var j = 0; j < side; j++) {
var cell = document.createElement("td"); // cell is reused to reference each new cell
cell.onmousemove = processMouseMove; // register event handler traditionally
row.appendChild(cell);
} // end for each cell
tbody.appendChild(row);
} // end for each row
}
// processes the onmousemove event
function processMouseMove(e) {//================================================
// if FF e will be available as formal parameter (i.e. DOM2 compliant)
if (!e)
var e = window.event; // if IE no e but can use window.event (i.e. NOT DOM2 compliant)
// e now cross-browser compliant
// turn the cell blue if the Ctrl key is pressed
if (e.ctrlKey)
this.style.backgroundColor = "blue"; // this is the <td> the mouse is currently moving over i.e. the element that caused this script to execute
// turn the cell red if the Shift key is pressed
if (e.shiftKey)
this.style.backgroundColor = "red";
if (e.altKey)
this.style.backgroundColor = "White";
} // end function processMouseMove
function erase() {
}
}
// -->
</script>
</head>
<!-- colspan: number of columns to extend <th> or <td> over, <tt> monospace font -->
<body onload="createCanvas()">
<table id="canvas">
<tbody id="tablebody">
<tr>
<th class="key" colspan="100">
Hold <tt>ctrl</tt> to draw blue. Hold <tt>shift</tt> to draw red.
Hold <tt>alt</tt> to erase.
</th>
</tr>
</tbody>
</table>
<p>
<input id="erase" type="button" value="Erase the background" onclick="erase()" />
</p>
</body>
</html>
Reply With Quote
Bookmarks