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" xml:lang="en" lang="en">
<head>
<title></title>
<style>
body { margin:0; padding:0; }
table { background-color: #ada39d; }
#Zoomed100 td {height: 29px; min-height: 29px; width: 36px; min-width: 36px; vertical-align: top; border-collapse: separate; border: 1px solid #dfdfdf; }
#Zoomed80 td {height: 20px; min-height: 20px; width: 20px; min-width: 20px; 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#popupon {
position: absolute;
display: none;
width: 240px;
height: 100px;
border: solid blue 3px;
background-color: lightableue;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div style="height: 900px; width: 2000px;">
<div class="mapcontent">
<table id="Zoomed80"></table>
</div>
</div>
<div style="height: 1192px; width: 2396px;">
<div class="mapcontent">
<table id="Zoomed100"></table>
</div>
</div>
<script type="text/javascript">
var map = [
"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"
};
function Map(id,map,cls){
// get references to important elements:
var table = document.getElementById(id);
// set up all the cells:
for (var r = 0; r < map.length; ++r) {
var row = map[r];
var tr = table.insertRow(-1);
if (row){
for (var c = 0; c < row.length; ++c) {
var cell = tr.insertCell(-1);
cell.id = (map.length - r - 2) + ":" + (c+1-5);
cell.className = cls[row.charAt(c)];
}
}
}
}
Map('Zoomed80',map,classes)
Map('Zoomed100',map,classes)
</script>
</body>
</html>