kittrellbj Posted July 21, 2009 Share Posted July 21, 2009 I don't have any real experience with JavaScript, so here I sit. I will try to keep the post brief, but I'll explain enough to let you know what's going on. I am designing a system (with alot of help from examples/tutorials in JavaScript) to allow users to draw a small image as a logo for themselves (like an avatar, but each is generated by the user drawing the picture themselves). So, I have the following code: <HEAD> </HEAD> <BODY> <script type="text/javascript"> var color = 'red'; // default color var columns = 20; // number of colums (X) var rows = 16; // 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 id=' + j + '_' + i + '></td><input type="hidden" name=' + j + '_' + i + '>'; 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> <style> div#drawing_table table{border:2px solid red;border-collapse:collapse;cursor:default;} div#drawing_table table td{width:16px;height:16px;border:1px solid #fafafa;} div#colors {margin-top:5px;} div#colors td{width:20px;height:20px;border:1px;cursor:pointer;} </style> <center> Select a color and draw on the canvas. When done, hit save logo. <form action=<?php echo $_SERVER['PHP_SELF']; ?> method="post"> <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> <input type="submit" name="submit_logo" value="Save Logo"></form> </div> </center> This code came from an example/tutorial page for the most part. What I am trying to do is use the function mousedown(e) to include an event to update a hidden input box with the same value as the name of the TD field, so that it can be tracked when the user hits Save Logo at the bottom of the page. When they hit Save Logo, I want the form to post to itself, go through each of the input hidden fields and capture the color for each coordinate, then generate an image based on the generated array, save it to a file on the server with the user's $_SESSION['userid'] as the filename + .jpg. The problem is, though, that I do not know how to tell JavaScript to do this in the function mousedown(e) code. Also, look in the function table_create and see if I am naming the hidden input boxes correctly; not sure if it will generate the wanted result. Thanks for all help on the matter in advance. (Edit: Please note that I tried searching on these forums all day yesterday. I believe the search daemon was down.) Quote Link to comment Share on other sites More sharing options...
kittrellbj Posted July 21, 2009 Author Share Posted July 21, 2009 A bit-too-late-edit: What I am trying to do is use the function mousedown(e) to include an event to update a hidden input box with the same value as the name of the TD field, so that it can be tracked when the user hits Save Logo at the bottom of the page. should be: What I am trying to do is use the function mousedown(e) to include an event to update a hidden input box with the same value as the background color of the TD field, so that it can be tracked when the user hits Save Logo at the bottom of the page. Quote Link to comment Share on other sites More sharing options...
kittrellbj Posted July 21, 2009 Author Share Posted July 21, 2009 Still no ideas? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.