Advanced JS help

[joeh156]

Hi,

Some background:

I have recently made use of a script called GSIV, it's basically an alternative to the google maps API that allows you to host your own large 'map' style image that has been tiled. See the original project page here if you're interested: GSIV

I have added a number of additions to it like a reset button and some move buttons. I also fixed/hacked a bug that was present when going outof 'full-page' mode.

The map has a well div (the image tiles are appended to this) and a surface div (this has the drag etc properties associated with it).

The problem:

I am hoping to add some more functionality to the GSIV map script so that there are clickable 'areas' that move dynamically with the map and have mouse over properties. You could call it a separate transparent layer perhaps. I also hope to have this implemented such that if a user clicks on an area and drags the mouse - the map moves, yet if they click on an area without dragging the mouse a redirect takes place.

Attempt number 1 involved tracking the users mouse location/position and comparing it to an array of locations - and then doing stuff if the areas are entered and/or clicked. This worked fine EXCEPT it was way too slow/laggy in ie6/7 and lets face it, it probably wasn't the best way to solve the problem.

I considered using an image map but this sounded like a bad idea...

For Attempt number 2 I am trying to add a set of transparent div's to the surface div that are moved when the user moves the map (the div locations stay relative to the position of the map tiles). I am trying to relocate the div's on mouseUp. I've been trying to get this to work for about a week now and I think its about time I got some expert help.

I've been working with JavaScript as long as i've been working on this GSIV script so im really a big n00bie (as im sure you will see from my messy/bad/terrible code ).

Take a look at my attempt so far HERE!
The crazy yellow box's are my test div's, they would of course be transparent in the final version. As you can see they disappear on mouse down and reappear on mouse up in what should be the correct new position relative to the map (it looks right but infact is always slightly wrong for some reason). Also, the massive text-box at the bottom is just temporary for debugging purposes only. I have been finding it useful - it allows me to see whats going on...!

You can see just the script HERE. And the directory listing is not hidden so take a look at all the files HERE. Finally if you want you can download a local copy of my test website HERE.

O and in its current state the site really only works in FF. The map part works fine in ie6 & in ie7 the map part works but for some reason it is not possible to drag it with the mouse. These issues still need fixing aswel.....but theyre not my primary concern at the moment theyre really just creases that need ironing out - so to speak!

Any help or more importantly *code* that fixes this problem would be really appreciated!!

Many thanks in advance! Joe

[joeh156]

I have now fixed this - I think I got lucky in the end....

Thanks everyone for your help....!