Explore code

[Spectre]

Hi all, really hoping there's a JS whizzkid who can help me here.

 

Basically, what I'm after is a 3x3 table like layout, with each cell being a picture (a small 80x80 image to act as a tile), easy enough right? Well then comes the reason for JS, exploration code.

 

Basically, the middle square would be your current location, above everything will be echoed out your location, for example "You are at: $xco, $yco"; and any associated text which may happen on that square. The lil table bit below will show 9 squares, you in the middle, then by clicking on a square you MOVE in that direction, so for example, you click the right middle square, you move to $yco+1, moving up would be $xco-1, top right would be $xco-1, $yco+1 and so on. The middle square, should have an option to "enter" if needed, for when you're on a city square for example.

 

Now I want the table to always update as you move, so the squares can change what image, if it's a square known to have a city in, as soon as it's within viewing distance (within the 3x3 square) it'll show the right image associated with those coords instead of the default grass tile I have.

 

So if anyone could help with how I'd go about this, I'd be very grateful.