IDs should not start with a digit and should not include characters you wouldn't see in a JS variable.
In place of "1:1", consider using "C1_1" or similar.
**********
Showing a menu is pretty trivial. You could just create a <div style="position: absolute; display: none; z-index: 99;"> that contains a <form> with the appropriate buttons or whatever you need to control and/or ask for your various options.
So then you just add an onclick to each cell that figures out where to position the <div> (change the style.top and style.left) and then change the style.display to block. Some action within the <div> will later hide it.
You want some skeleton code?
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
that is indeed massive. I hope you automated the process somewhat.
getting the menu to display is simple - just loop through the TDs adding a click listener to them. The click then displays a hidden div or whatever that can appear at the point of the click or wherever else you feel like. As for the actual functionality of those menu items - some of them are going to be quite tricky.
You know that there are mapping APIs (google is the most obvious one) that let you use your own tiles and have all of that functionality built in, right?
oh, and if you can avoid it, please don't use IDs like 1:1 - except in HTML5, IDs aren't supposed to start with a number
(3) Add all the following code after the </div> and before the </body> (that is, add everything *NOT* shown in red between the spots shown in red):
Code:
</table>
</div>
<div id="popon">
You just clicked on cell <span id="whichClicked"></span>
<br/>
The cell type is <span id="typeClicked"></span>
<br/>
<i>(click to close)</i>
</div>
<script type="text/javascript">
(
function()
{
// get references to important elements:
var tbl = document.getElementById("mainMap");
var pop = document.getElementById("popon");
var clk = document.getElementById("whichClicked");
var typ = document.getElementById("typeClicked");
// handle click-to-close
pop.onclick = function( ) { this.style.display = "none"; }
// set up all the cells:
for ( var r = 0; r < tbl.rows.length; ++r )
{
var row = tbl.rows[r];
for ( var c = 0; c < row.cells.length; ++c )
{
var cell = row.cells[c];
cell.id = "C" + r + "_" + c;
cell.onclick = cellClick;
}
}
// and then handle any click:
function cellClick( )
{
clk.innerHTML = this.id;
typ.innerHTML = this.className;
// where is this cell?
var x = -115; // adjust these to position the popon
var y = -32; // relative to the top left of cell
var node = this;
while ( node != null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
// you could code in here to ensure that the entire popon
// is visibile (no off the bounds of the display)
// Just for starters, you should do:
if ( x < 0 ) x = 0;
if ( y < 0 ) y = 0;
// but you could also check to make sure
// its not off bottom or right side
// then position it:
pop.style.top = y + "px";
pop.style.left = x + "px";
pop.style.display = "block";
}
}
)();
</script>
</body>
</html>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
The only problem I would like to ask for some help with modifying is the cell numbering.
The bottom left-hand corner is 1:1. I am so made up with this as I thought it would be a lot harder than what is seems to be as no xelawho, I did not automate any of this map and I was zombified afterwards so to speak!
Also, I plan to implement a certain percent of this map to be hidden. I have this all ready elsewhere to add this content into. Would it be possible, without complicating things, to have the menu not hidden being in this div or will the z-index mean it'll always show?
depending on which version of my code you are using.
********
Quote:
I have this all ready elsewhere to add this content into. Would it be possible, without complicating things, to have the menu not hidden being in this div or will the z-index mean it'll always show?
If you have space RESERVED for the menu, then the z-index won't matter.
And you won't need to worry about positioning the menu div, either.
Except if your map is larger than the screen (it is on my screen, and I'm using an HD resolution monitor: 1920 x 1080) then if you scroll around the menu may go off the screen. So maybe a popon *is* better?
But let's leave that until you show us what the map will look like after parts are hidden.
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Again, if you want the menu in a FIXED PLACE, then you do *NOT* want to use display: none.
You also do NOT WANT to set its top and left locations relative to the clicked-on cell.
Did you not understand that all this code:
Code:
// where is this cell?
var x = -115; // adjust these to position the popon
var y = -32; // relative to the top left of cell
var node = this;
while ( node != null )
{
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
// you could code in here to ensure that the entire popon
// is visibile (no off the bounds of the display)
// Just for starters, you should do:
if ( x < 0 ) x = 0;
if ( y < 0 ) y = 0;
// but you could also check to make sure
// its not off bottom or right side
// then position it:
pop.style.top = y + "px";
pop.style.left = x + "px";
pop.style.display = "block";
is used to MOVE the information/menu location?
If you don't want it to move, DO NOT MOVE IT!
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
I'm sorry Old Pedant, I am quite new to Javascript, therefore your comments I was not 100% sure how to modify these to get the correct results.
I would like every cell to be clickable, more so for the non-'No-Mans' area as these do not need co-ords, a drop down menu which appears near to the cell.
Also, whilst testing, I was wondering how to modify the map to make it do you need to double click, however I'm not sure if modern smart phones allow for this feature? It's just when you click on the map and then drag, a new box appears.
Lastly, do you know how to calculate the width and height as my attempts have failed?
Before you post, read our: 
How to show a menu on table <td> click?
