How to recognize DHTML DOM elements
Page 1 of 1
How to recognize DHTML DOM elements
#1
Posted 13 December 2008 - 10:05 AM
Hi All,
I have an image that I'm moving around an HTML page using the arrow keys (keycodes 37, 38, 39 and 40) and onkeypress event. However, I can't tell when my moving image runs into things like a table (td tags) or other images (img tags). Is there a ways to tell my moving image that it has run into another tags?
This is not homework. I'm new to Javascript/CSS, as I usually do C++ programming.
I appreciate any help.
Thanks,
choo_chu.
I have an image that I'm moving around an HTML page using the arrow keys (keycodes 37, 38, 39 and 40) and onkeypress event. However, I can't tell when my moving image runs into things like a table (td tags) or other images (img tags). Is there a ways to tell my moving image that it has run into another tags?
This is not homework. I'm new to Javascript/CSS, as I usually do C++ programming.
I appreciate any help.
Thanks,
choo_chu.
#2
Posted 13 December 2008 - 10:17 AM
Yes, you can eventually get to a point where you can tell collisions, but it will be quite a bit of work. You have to constantly be checking the image's x, y, width, and height against other tags' x, y, width, and height to see if any of them are overlapping. If they are then there is a collision, if not then you are okay. The hardest part of this (from my perspective) is getting it to be friendly; meaning that you may (and probably will) have a bit of a hard time getting the dynamic x and y values, but at least you don't (hopefully) have to worry about the image sizes changing, that would make this even worse.
#3
Posted 14 December 2008 - 03:28 PM
Hi BetaWar,
Thanks for your help. I had to think about it for a little bit, which is why it took me so long to respond.
What I ended up doing was making a "Picture" object which contains information about the image, including what kinf of td elements it has in it's containing cell. Such as RIGHT_TOP which means that the image is contained in a td cell that has a border to the right and top. The Picture object also contains it's location and image source so I can do image swaps easily. When I get to an image a location I can tell whether I'm on a Picture, then I can also tell whether I will bang into walls (i.e. td tags) by looking at what's around me in the Picture object. That way I know in which directions I can move.
I have no idea if that makes any sense, but once I got it worked out it worked quite nicely.
Melissa.
Thanks for your help. I had to think about it for a little bit, which is why it took me so long to respond.
What I ended up doing was making a "Picture" object which contains information about the image, including what kinf of td elements it has in it's containing cell. Such as RIGHT_TOP which means that the image is contained in a td cell that has a border to the right and top. The Picture object also contains it's location and image source so I can do image swaps easily. When I get to an image a location I can tell whether I'm on a Picture, then I can also tell whether I will bang into walls (i.e. td tags) by looking at what's around me in the Picture object. That way I know in which directions I can move.
I have no idea if that makes any sense, but once I got it worked out it worked quite nicely.
Melissa.
Page 1 of 1

Start a new topic
Add Reply



MultiQuote

| 


