K
Kirk Is
So I'm working on a simple graphical editor using a table as a canvas,
and in general it's working well with onMouseDown and onMouseOver for
the TD elements, and then catching onMouseUp for the entire document.
There's one hitch and I can't figure out how to google for more
info...sometimes (repeatable-ish, but it's not clear when it happens
and when it doesn't) the pointer changes into the "forbidden" symbol,
as if the browser (both IE and Firefox) thought I was trying to do a
drag and drop operation, or something... (that's a guess)
Here's about the simplest code I could get to demonstrate the problem:
--snip--
<html><head>
<style type="text/css" media="screen">
td.edbox{
width: 10px;
height: 10px;
background-color:#CCCCFF
}
</style>
<script>
var mouseIsDown;
/*handler for whole page -- mouse is up, we don't care where!*/
document.onmouseup=function(eEvent) {
mouseIsDown = false;
}
function edboxMouseDown(thing){
mouseIsDown = true;
edboxMouseOver(thing);
}
function edboxMouseOver(thing){
if(mouseIsDown) {
thing.style.background = "#FFCCCC";
}
}
</script>
</head>
<body>
<table border=0 cellpadding=0 cellspacing=0>
<script>
for(var v = 0; v < 20; v++) {
document.write('<tr>');
for(var h = 0; h < 20; h++) {
document.write('<td class="edbox" '+
'onMouseOver="edboxMouseOver(this)" '+
'onMouseDown="edboxMouseDown(this);" '+
'></td>');
}
document.write('</tr>');
}
</script></table></body></html>
--snip--
Any ideas on how to correct this? It's not a show-stopper but it is
rather annoying... thanks!
and in general it's working well with onMouseDown and onMouseOver for
the TD elements, and then catching onMouseUp for the entire document.
There's one hitch and I can't figure out how to google for more
info...sometimes (repeatable-ish, but it's not clear when it happens
and when it doesn't) the pointer changes into the "forbidden" symbol,
as if the browser (both IE and Firefox) thought I was trying to do a
drag and drop operation, or something... (that's a guess)
Here's about the simplest code I could get to demonstrate the problem:
--snip--
<html><head>
<style type="text/css" media="screen">
td.edbox{
width: 10px;
height: 10px;
background-color:#CCCCFF
}
</style>
<script>
var mouseIsDown;
/*handler for whole page -- mouse is up, we don't care where!*/
document.onmouseup=function(eEvent) {
mouseIsDown = false;
}
function edboxMouseDown(thing){
mouseIsDown = true;
edboxMouseOver(thing);
}
function edboxMouseOver(thing){
if(mouseIsDown) {
thing.style.background = "#FFCCCC";
}
}
</script>
</head>
<body>
<table border=0 cellpadding=0 cellspacing=0>
<script>
for(var v = 0; v < 20; v++) {
document.write('<tr>');
for(var h = 0; h < 20; h++) {
document.write('<td class="edbox" '+
'onMouseOver="edboxMouseOver(this)" '+
'onMouseDown="edboxMouseDown(this);" '+
'></td>');
}
document.write('</tr>');
}
</script></table></body></html>
--snip--
Any ideas on how to correct this? It's not a show-stopper but it is
rather annoying... thanks!