[SOLVED] I'm at a loss!

[deadlyp99]

So... A friend and I are trying to mimic a game we both like, and while hes doing the design, I'm mostly doing the "engine" so to speak.

 

But while creating my world map "section" that users see, I came across a big error. I created a javascript method to change the X and Y coordinates displayed as a user hovers over a specific map square, however because my DIV is a square and my image a polygon (specifically a turned square...) I'm finding that an error is being created, and a serious one.

 

Lower on the map, because the div is a square, it covers parts of the other divs, and that causes read errors in the javascript making one square appear as another, as illustrated (as best I can), in this screen shot taken with firebug that I attached.

 

The real site uses an area map over an image, but I'm finding it way too complex (my coding is a lot better then my web design :/).

 

So I am wondering how I can specifically fine tune the javascript to only fire on the bounds of the image itself (relative to the div it is in preferably).

 

Even by shortening the div so it does not overlap at the top, I will still have a problem with the corners of the divI thought I might be able to create a complex network of z-index's, but that sounds like a very crappy hack job so I haven't sat and worked out the logic (stacking paper on top of each other xD).

 

Some help, insight, suggestions, etc into this would greatly be appreciated.

Each square is spat out from php with specific data from my database, which is why the area map is just too complex for me to figure out.

 

Thanks for any help

 

 

[attachment deleted by admin]

[deadlyp99]

I found a solution :-]