OH UGLY UGLY UGLY!
NOW I see what you have done!
Code:
<div id="viewport2">
<div style="width:445px; height:224px;">
<!--top level map content goes here-->
</div>
<div style="height: 336px; width: 667px;">
<div class="mapcontent">
<!--map content goes here-->
</div>
</div>
<div style="height: 488px; width: 890px;">
<div class="mapcontent">
<!--map content goes here-->
</div>
</div>
etc.
So each of those differently sized DIVs will have the *SAME* map, but at different zoom levels???
THIS IS A KILLER!
I think you have made a HUGE mistake!
OF COURSE everything you do when you change zoom levels is NOW WIPED OUT. Just because two cells have the same ID in different maps does *NOT AT ALL MAKE THEM THE SAME CELL!* And, just incindentally, it's illegal to have two or more elements with the same ID in the first place!
Look, instead of doing it this way, just have the *ONE* <div>.
Code:
<div class="mapwrapper">
<div id="viewport2">
<div id="mapHolder" style="height: 1192px; width: 2396px;">
<div class="mapcontent">
<table id="mainMap" class="zoom100"></table>
</div>
</div>
</div>
</div>
And now you use my concept of just changing the className of document.getElementById("mainMap").
And then you *AUTOMATICALLY* also change the height and width of document.getElementById("mapHolder") [I just added that id] to match the size of the re-sized (zoomed) <table>! And you do that by getting the new size of the <table> all in JS code!
Example:
Code:
tbl.className = "zoom" + zoomLevel; // where zoomLevel is 100,75, or 50...or whatever you choose
var holder = document.getElementById("mapHolder");
holder.style.height = tbl.offsetHeight;
holder.style.width = tbl.offsetWidth;