event handling through CSS and modifying style dynamically

Kirk Is · May 9, 2005

Hi there.
I'm trying to improve a simple javascript based graphics editor for
Atari 2600 games (long story) with better use of CSS and Javascript.
I'm a little weak on what CSS can and can't readily do (sometimes I'm
stuck in a Netscape 3 world, mentally) so I have a few questions:

Say I had an editor with some CSS like this:
<html><head>
<style type="text/css">
td.edt {background-color: yellow; height: 50px; width:50px}
</style>
</head><body>
<table>
<tr>
<td class="edt" name="00"></td>
<td class="edt" name="01"></td>
</tr>
<tr>
<td class="edt" name="10"></td>
<td class="edt" name="11"></td>
</tr>
</table>
</body></html>

1. Is there anyway to associate event handlers like onMouseDown with
every td of class "edt", or will I need to put the onMouseDown in the
tag of each td ? (Or do I need to get very complex with javascript
prototypes etc, so it would be easier just to do the individual
onMouseDowns ?)

2. Via javascript, can I modify the edt class so that, say, every
element using that class will change, like color or size?

3. Is there a better way of doing a basic graphics editor than to just
monitor onMouseDown / onMouseUp / onMouseOver ? It seems like I might
have a problem turning the "pen off" if the mouse leaves the table
entirely...can I capture a onMOuseOut for the whole table, or a <div>
surrounding it? When I tried that, it seemed like it was also setting
up a onMouseOut for the children <td> elements...

THanks

Baconbutty · May 10, 2005

1. Is there anyway to associate event handlers like onMouseDown with
Some events "bubble". I.e. if you click on the TD, the event will fire
for every parent element up to the "document".

So you could set an event on the document thus:-

document.onmousedown=function(eEvent)
{
var eEvent=eEvent||window.event;
var eElement=eEvent.target||eEvent.srcElement;

if (eElement.tagName=="TD"){//do something;}

};

2. Via javascript, can I modify the edt class so that, say, every
element using that class will change, like color or size?

Yes, you will need to learn about modifying rules within styleSheet
objects.

See: http://www.quirksmode.org/dom/changess.html

3. Is there a better way of doing a basic graphics editor than to just

monitor onMouseDown / onMouseUp / onMouseOver ?

Within the confines of Javascript and HTML, I don't know.

It seems like I might
have a problem turning the "pen off" if the mouse leaves the table
entirely...can I capture a onMOuseOut for the whole table, or a <div>
surrounding it? When I tried that, it seemed like it was also setting
up a onMouseOut for the children <td> elements...

This is because events "bubble". An onmouseout on a TD element, will
also bubble up and fire the same event on the TABLE element.

It is a problem, and I am sure others will have better solutions.

You could try detecting whether the "srcElement" or "target" for the
onmouseout event is the the TABLE element. But if you move the mouse
quickly, or the table has no border, this may fail.

Or, for all "onmouseouts" and "onmouseover" events in the document as a
whole, you could get the srcElement or target, and if it is not a TD
within the table, fire your pen up event.

IE has also "onmouseenter" and "onmouseleave" which you might
investigate.

Julian

Kirk Is · May 10, 2005

Baconbutty said:
Yes, you will need to learn about modifying rules within styleSheet
objects.

See: http://www.quirksmode.org/dom/changess.html

Ugh -- might be better to iterate over the relevant elements.

This is because events "bubble". An onmouseout on a TD element, will
also bubble up and fire the same event on the TABLE element.

A reasonably clean solution I've found is to just set the handler for
the document:
document.onmouseup=function(eEvent) {
mouseIsDown = false;
}
I don't care *where* the mouse is released, so this works well.

Thanks! I'm actually posting a related post w/ example code elsewhere
here.

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Javascript DOM	1	Mar 29, 2023
Sort by number of characters	1	Nov 2, 2023
Getting extra blank rows from appending HTML..?	2	Oct 24, 2023
How to have two html audio players on one page?	0	May 3, 2022
Positioning CSS components	1	Nov 16, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Help needed with thank you message	5	Sep 11, 2021

event handling through CSS and modifying style dynamically

Kirk Is

Baconbutty

Kirk Is

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads