|
Supreme Master coder!
Join Date: Feb 2009
Posts: 23,168
Thanks: 59
Thanked 3,992 Times in 3,961 Posts
|
Ummm...I don't think this is the right approach.
I may be way off base, but I *THINK* the answer is much much easier.
Demonstrating with the code I posted before. You can see how to adapt it to your new version. Changes in red, as usual.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{margin:0; padding:0; overflow:scroll; }
table {
width:100%;
background-color: #ada39d;
}
.zoom100 td {
height: 29px;
min-height: 29px;
width: 36px;
min-width: 36px;
vertical-align: top;
border-collapse: separate;
border: 1px solid #dfdfdf;
}
.zoom75 td {
height: 22px;
min-height: 22px;
width: 27px;
min-width: 27px;
vertical-align: top;
border-collapse: separate;
border: 1px solid #dfdfdf;
}
.zoom50 td {
height: 15px;
min-height: 15px;
width: 18px;
min-width: 18px;
vertical-align: top;
border-collapse: separate;
border: 1px solid #dfdfdf;
}
.NoMans1 {background-color:#CCCCCC; }
.NoMans2 {background-color:#b7cdb7; }
.Wall {background-color:#8e8e8e; }
.Forest{background-color:#8eb68e }
.Grass{background-color:#b7cdb7; }
.fog{background-color:#dacbda; }
.fog2{background-color:#d2d2d2; }
.DeepWater{background-color:#a4cdd9; }
.ShallowWater, .Sherrif{background-color:#acdada; }
.Unknown{background-color:#e3cca1; }
.Cliff{background-color:#bbb099; }
.Hospital{background-color:#e5faff; }
.UnknownBuilding{background-color:#cbbcda; }
.Path{background-color:#dabc8e; }
.Castle{background-color:#d8cabc; }
.WitchsHouse, .ChefsHouse{background-color:#daa3a3; }
.Cave{background-color:#b1b1b1; }
.GreatHall{background-color:#c7d1ed; }
.Church{background-color:#d9e3a1; }
div#popon {
position: absolute;
display: none;
width: 240px;
height: 100px;
border: solid blue 3px;
background-color: lightblue;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div>
<form id="sizechange">
<label><input type="radio" name="zoom" value="zoom100" checked="checked" /> 100% </label>
<label><input type="radio" name="zoom" value="zoom75"/> 75% </label>
<label><input type="radio" name="zoom" value="zoom50"/> 50% </label>
</form>
<br/>
<table id="mainMap" class="zoom100">
</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()
{
var theMap = [
"111112222222222222222222222222222222222222222222222222222",
"111112222222222222222222222222222222222222222222222222222",
"11111WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW222222222222",
"11111TTTTTTTGGGGfffffGGGQ?????EFGGGWHHHHHHHHW222222222222",
"11111TTTTTTGGGGGGfffGGGQQ?????EFFGGWHHHHHHHHW222222222222",
"11111TTTTTTTGGGGGGfGGGGQq?WWWWWFFfGWHHHHHHHHW222222222222",
"11111TTTWWWTGGGGGGGGGGQQqqWUUUUFFffWHHHHHHHHWWWW222222222",
"11111TTTWTWTTGGGGGGGGGQGGGWUUUWFFffWHHHHHHHHHPPW222222222",
"11111TTTWWWTTWWWWWWWGGQGGGWUUUWFFffWHHHHHHHHWWPW222222222",
"11111TTTTTTTTWCCCCCWGGQGGGWUUUWFFqqWWWHWWWWWWWPW222222222",
"11111TTTTTTGGWCCCCCWGGQGGGWWUWWFFqQQQQPQQQQQWWPW222222222",
"11111TTTTTGGGWCCCCCWGGQGGGGGPGEFFqqGGGPGGGGGWWPW222222222",
"11111TTTTGGGGWCCCCCWGGQGGGGGPGEFGGGTTGPGGGGfWWPW222222222",
"11111TTTGGGGGWWWCWWWGGQGGGGGPPPPFFTTTTPGGGffPPPW222222222",
"11111FFFGGGGGGGGPGGGGGQGGGGGPGEPFGTTTGPGGGffWWWW222222222",
"11111FFFFFFGGGGGPPPPPPQPPPPPPGEPGTTTTGPGGfffWGGG222222222",
"11111WWWFFFFGGGGPGGGGGQGPGWWWWWPPPPPTPPGGGGfW222222222222",
"11111cccWcWFGGGGPGWWWWQGPGWwwwWGGGGTTTGGGGGGW222222222222",
"11111cccccWFGWWWPGWhhhQGPGWwwwWGGGGGTGGGGGGGW222222222222",
"11111cccccWFGWGWPGWhhhQGPGWWWWWGGGGGGGGGGGGGW222222222222",
"11111ccccWFFGWWWPGWhhhQGPGGGGGEGGGGGGGGGGGG?W222222222222",
"11111cccWFFGGGGGPGWhhhQGPPPGGGEGGGGGGGGGGG??W222222222222",
"11111WWWFFGGGGGGPGWWhWQGGGPGGGEGGGqGqGGGGG??W222222222222",
"11111FFFFGGGGGGGPGGGPGQGGGPGGGEGGGqqqqGGG???W222222222222",
"11111FFFGGGGGGGGPPPPPGQGGGPGGGEGGqqqqWWWWWWWWWWWW22222222",
"11111FGGGGGGGGGGPGGGGGQGWW+WWGEGGqWWWWBBBBBBBBBBW22222222",
"11111GGGGGGGGGGGPGGGGGQGW+++WGEGqqWBBBBBBBBBWWWBW22222222",
"11111GGGGGGGGGGGPGGGGGQGWWWWWGEGGqWBBBWBBBBBWqWBW22222222",
"11111PPPPPPPPPPPPPGGGGQGGfGfGfEGGGWWWWWWWWWBWqWBW22222222",
"11111PGGGGGGGGGGGPGGGGQGffffffEGGGGGGGGGGGBBWWWBW22222222",
"11111PGGGGGGGGGGWWWGGGQfffffffEEGGGGGGWWWWWBBBBBW22222222",
"11111PGGGGGGGGGGWSWGGGQfffffffEEEGGGGGWBBBBBBBBBW22222222",
"111111111111111111111111111111111111111111111111111111111",
"111111111111111111111111111111111111111111111111111111111"
]
var classes = {
"1" : "NoMans1",
"2" : "NoMans2",
"W" : "Wall",
"T" : "Forest", /* think "T"rees */
"G" : "Grass",
"f" : "Fog",
"F" : "Fog2",
"Q" : "DeepWater", /* think a"Q"ua */
"q" : "ShallowWater",
"S" : "Sherrif",
"?" : "Unknown",
"E" : "Cliff", /* think "E"scarpment */
"H" : "Hospital",
"U" : "UnknownBuilding",
"P" : "Path",
"C" : "Castle",
"w" : "WitchsHouse",
"B" : "ChefsHouse", /* think "B"aker */
"c" : "Cave",
"h" : "GreatHall",
"+" : "Church"
}
// 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");
var form = document.getElementById("sizechange");
for ( var z = 0; z <= 2; ++z )
{
form.zoom[z].onclick = function( ) { tbl.className = this.value; }
}
// handle click-to-close
pop.onclick = function( ) { this.style.display = "none"; }
// set up all the cells:
for ( var r = 0; r < theMap.length; ++r )
{
var row = theMap[r];
var tr = tbl.insertRow(-1);
for ( var c = 0; c < row.length; ++c )
{
var cell = tr.insertCell(-1);
cell.id = "C" + (theMap.length - r) + "_" + (c+1);
cell.className = classes[row.charAt(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.
|