School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!
Welcome to Dream.In.Code
Become an Expert!

Join 340,132 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 3,925 people online right now. Registration is fast and FREE... Join Now!



How to recognize DHTML DOM elements

How to recognize DHTML DOM elements

#1 choo_chu  Icon User is offline

  • New D.I.C Head
  • Pip
  • Group: New Members
  • Posts: 2
  • Joined: 13-December 08


Dream Kudos: 0

Post icon  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.
Was This Post Helpful? 0
  • +
  • -


#2 BetaWar  Icon User is online

  • #include <soul.h>
  • Icon
  • Group: Moderators
  • Posts: 4,945
  • Joined: 07-September 06


Dream Kudos: 1500

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.
Was This Post Helpful? 0
  • +
  • -

#3 choo_chu  Icon User is offline

  • New D.I.C Head
  • Pip
  • Group: New Members
  • Posts: 2
  • Joined: 13-December 08


Dream Kudos: 0

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.
Was This Post Helpful? 0
  • +
  • -



Fast Reply

  

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users



Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month