0 Replies - 2805 Views - Last Post: 29 November 2009 - 04:16 PM

#1 rfairchild  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 23
  • Joined: 24-October 09

drawing program

Posted 29 November 2009 - 04:16 PM

directions:
P514
EXERCISE 13.3

1.
Add an erase feature to the drawing program in draw.html Fig. 13.3 page 493.Try setting the background color of the table cell over which the mouse moved to white when the Alt key is pressed.(30 points)

2.
Change the 2 colors drawn to any other colors besides red and blue (20 POINTS)

code:
<! DOCTYPE html PUBLIC "-// W3C// DTD XHTML 1.0 Strict// EN"
			   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- Fig. 13.3: draw. html -->
<!-- A simple drawing program. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
	  <head>
			<title>Simple Drawing Program</title>
			<style type = "text/css">
				 # 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;
						 var tbody = document.getElementById( "tablebody" );

						 for ( var i = 0; i < side; i++ )
						{
						 var row = document.createElement( "tr" );

						 for ( var j = 0; j < side; j++ )
						{
						var cell = document.createElement( "td" );
						cell.onmousemove = processMouseMove;
						row.appendChild( cell );
					} // end for

						tbody.appendChild( row );
				  } // end for
			 } // end function createCanvas

				   // processes the onmousemove event
				 function processMouseMove( e )
{
// get the event object from IE
if ( ! e )
var e = window.event;

// turn the cell purple if the Ctrl key is pressed
if ( e.ctrlKey )
this.style.backgroundColor = "purple";

// turn the cell red if the Shift key is pressed
if ( e.shiftKey )
this.style.backgroundColor = "orange";
} // end function processMouseMove

document.writeln("<form >");
document.writeln("<input type=submit value='click here to clear'></form>");
// -->

</script>
</head>
<body onload = "createCanvas()">
<table id = "canvas" class = "canvas"><tbody id = "tablebody"> 
<tr><th class = "key" colspan = "100">Hold <tt>ctrl</tt>
to draw purple.Hold<tt>shift</tt>to draw orange.</th></tr>
</tbody></table> 
</body>
</html>



The program works with an erase button but not sure if that what i was suppose to accomplished. would i really need to do this part: Try setting the background color of the table cell over which the mouse moved to white when the Alt key is pressed.


Mod edit - Please :code:

Is This A Good Question/Topic? 0
  • +

Page 1 of 1