> I now think you can make a pixel painter using HTML4 and
> javascript that will allow you to drag the mouse around as you
> describe and still work on IE, Firefox and Safari/Konqueror.
> Google Suggest and Google Maps have really opened my eyes to
> some techniques I'd never thought of before, and while I'm up to
> my eyeballs in client projects right now (one of which uses
> these techniques) if no one else figures it out I'll try to post
> some example code eventually (maybe a web-based Hack-o-Matic ;)
> ).
>
> Rob
The logic is pretty straightforward. It doesn't matter what HTML containers you use (tables or divs/spans), but the event model is basically this for a 3x2 grid:
(I hope this shows up as text and not rendered HTML for y'all)
<table onclick="setMouseDown();" onrelease="setMouseUp();">
<tr>
<td onmouseover="drawIfMouseDown();"></td>
<td onmouseover="drawIfMouseDown();"></td>
<td onmouseover="drawIfMouseDown();"></td>
</tr>
<tr>
<td onmouseover="drawIfMouseDown();"></td>
<td onmouseover="drawIfMouseDown();"></td>
<td onmouseover="drawIfMouseDown();"></td>
</tr>
</table>
[script block]
var penDown; // global pendown variable
function setMouseDown() {
penDown = true;
}
function setMouseUp() {
penDown = false;
}
function drawIfMouseDown(Event) {
if (penDown) {
if (!Event) Event = event;
// Affect the event source element somehow (draw/erase/toggle/whatever)
}
}
[end script]
This is very simplified and doesn't account for default browser drag behavior, but you get the general idea. Feel free to scour this source code (view source) here:
http://www.ioyu.com/io/atari/reflex/editor.asp
It's not commented, but it's pretty well broken up into little digestible bits.
I apoligize for my site sucking and never being updated, but there are some other scripts in the JavaScript section that you may find interesting.
Ciao,
-Lee
Archives (includes files) at http://www.biglist.com/lists/stella/archives/
Unsub & more at http://stella.biglist.com
