Of all the solutions i have seen for this they fall into 3 categories.
-
Syntax or mispelling.
-
Using a type other than text/javascript.
-
Having two or more id with the same name.
I have none of these issues and i get an error on the process table data call.
What do i need to do so this will work in Internet Explorer. Firefox and others do work.
window.onload=function() {
ProcessTableData();
mapzoom.add(document.getElementById('UtCounties'),{buttons:false,fading:true});
}
As requested here is the full and complete code. Please dont mention the html tag or doctype as the content management system (WebEoc – ESI) takes care of that. Pleases dont mention any tags that refer to eocrepeatallrecords as those are cms specific. What it does there is build a table of which i consume and set options for the mapzoom product via the calssname.
<html>
<head>
<title>Image Map Dispaly</title>
<style>
table{font-size:11px;font-family:Sans-serif;}
.TableTitle{text-align:center; font-size:15px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/mapzoom.js"></script>
<script type="text/javascript">
window.onload=function() {
ProcessTableData();
mapzoom.add(document.getElementById('UtCounties'),{buttons:false,fading:true});
}
</script>
</head>
<body>
<table id="eocTable"><!-- style="display:none;" <attribute name="bgColor">#<value-of select="/data/listitems[@listname='Activation Status' and @name=current()/@status]/@listvalue"></value-of></attribute> -->
<eocrepeatallrecords sort="County_Select, initial_datetime desc"><!-- Changing the order or structure between the eocrepeatallrecords tag will cause errors in the script. -->
<tr>
<td width="70px"><eocfield name="County_Select"></eocfield></td>
<td width="20px"><eocfield name="status"></eocfield></td>
<td style="display:none;"><value-of select="/data/listitems[@listname='Activation Status' and @name=current()/@status]/@listvalue"></value-of></td>
<td selected="true"><eocfield name="initial_datetime"></eocfield></td>
</tr>
</eocrepeatallrecords>
</table>
<table border="1" id="mainTable">
<tr>
<td colspan="2">
<p class="TableTitle">County Activation Status</p>
</td>
</tr>
<tr>
<td>
<table id="displayTable" border="1">
<tr><td width="70px">Beaver</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Box Elder</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Cache</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Carbon</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Daggett</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Davis</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Duchesne</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Emery</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Garfield</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Grand</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Iron</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Juab</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Kane</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Millard</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Morgan</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Piute</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Rich</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Salt Lake</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">San Juan</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">San Pete</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Sevier</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Summit</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Tooele</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Uintah</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Utah</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Wasatch</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Washington</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Wayne</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
<tr><td width="70px">Weber</td><td width="20px"></td><td style="display:none;"></td><td></td></tr>
</table>
</td>
<td><div>
<!-- /UTAHSS-1/plugins/filestore/getfile.ashx?fileid=1336" usemap="#UtCounties" id="mapImg -->
<img src="/UTAHSS-1/plugins/filestore/getfile.ashx?fileid=1336" usemap="#UtCounties" id="UtCounties" border="0"></img>
</div>
<map id="UtCounties" name="UtCounties">
<area shape="poly" title="" alt="" href="#" coords="8,432,9,389,128,393,128,400,135,407,135,409,141,416,140,425,138,429,130,433" /><!-- Beaver -->
<area shape="poly" title="" alt="" href="#" coords="20,48,162,51,172,71,170,76,171,83,173,96,179,97,182,105,176,109,171,117,155,116,136,142,114,148,18,147" /><!-- Box Elder -->
<area shape="poly" title="" alt="" href="#" coords="210,51,160,51,173,71,172,75,169,79,172,84,173,90,172,96,182,103,181,109,192,112,200,109,208,108,215,94,215,81,210,67,212,60,212,58" /><!-- Cache -->
<area shape="poly" title="" alt="" href="#" coords="227,270,326,269,330,272,325,278,323,284,321,293,322,303,242,303,235,292,228,278" /><!-- Carbon -->
<area shape="poly" title="" alt="" href="#" coords="323,150,393,148,395,184,387,182,382,165,370,164,370,171,362,177,358,169,343,171,333,173,322,169" /><!-- Daggett -->
<area shape="poly" title="" alt="" href="#" coords="190,164,182,137,161,135,134,142,152,174,172,158,175,169" /><!-- Davis -->
<area shape="poly" title="" alt="" href="#" coords="325,271,324,170,302,168,283,176,267,177,263,181,256,179,255,258,258,262,259,270" /><!-- Duchesne -->
<area shape="poly" title="" alt="" href="#" coords="324,399,325,388,321,383,315,379,318,373,312,357,314,351,323,356,322,350,313,347,315,339,319,328,319,319,323,311,323,303,242,303,228,280,228,304,224,304,223,399" /><!-- Emery -->
<area shape="poly" title="" alt="" href="#" coords="131,434,332,434,323,438,320,448,315,447,310,454,310,459,294,461,290,470,288,482,282,486,279,494,275,495,114,494,114,468,124,468,124,458,133,458" /><!-- Garfield -->
<area shape="poly" title="" alt="" href="#" coords="325,401,325,395,323,391,317,379,319,376,311,359,314,357,314,352,323,357,323,351,314,348,316,335,320,327,318,322,323,312,323,303,391,302,397,301,398,399" /><!-- Grand -->
<area shape="poly" title="" alt="" href="#" coords="8,431,131,434,131,460,123,460,121,469,113,469,113,494,98,495,97,498,69,501,67,495,51,493,50,485,6,486" /><!-- Iron -->
<area shape="poly" title="" alt="" href="#" coords="13,256,13,292,154,294,155,316,166,317,172,315,177,312,191,311,192,303,193,282,201,278,201,269,186,271,189,263,183,256,169,271,163,272,165,259,158,250,142,259" /><!-- Juab -->
<area shape="poly" title="" alt="" href="#" coords="96,549,95,494,276,496,275,500,269,501,272,506,267,508,269,513,262,517,258,514,257,519,256,529,251,536,239,538,234,540,228,545,225,543,221,549" /><!-- Kane -->
<area shape="poly" title="" alt="" href="#" coords="12,293,153,295,154,316,168,318,169,344,164,353,158,357,156,363,152,365,152,378,143,382,133,381,130,393,9,389" /><!-- Millard -->
<area shape="poly" title="" alt="" href="#" coords="222,138,231,136,227,131,225,120,217,115,211,130,203,128,196,132,186,128,183,139,186,156,190,165,200,171,206,172,211,169,207,158,202,154,207,147,216,143" /><!-- Morgan -->
<area shape="poly" title="" alt="" href="#" coords="180,435,180,409,189,399,129,397,133,408,137,410,142,414,138,425,141,429,133,433" /><!-- Piute -->
<area shape="poly" title="" alt="" href="#" coords="211,51,244,51,243,127,230,136,227,127,224,117,216,115,209,109,217,88,210,67,212,59" /><!-- Rich -->
<area shape="poly" title="" alt="" href="#" coords="153,173,173,158,175,168,189,165,199,169,202,182,204,192,201,194,195,199,190,199,174,209,168,206,164,208,158,204" /><!-- SaltLake -->
<area shape="poly" title="" alt="" href="#" coords="322,400,399,399,402,548,219,549,234,540,246,538,255,532,258,515,267,517,270,510,270,502,274,501,281,491,286,482,291,472,293,461,309,458,316,448,327,437,334,429,330,418,323,409" /><!-- SanJuan -->
<area shape="poly" title="" alt="" href="#" coords="169,346,168,318,173,316,177,313,190,312,192,303,191,284,202,277,202,270,227,269,228,305,224,304,223,347" /><!-- Sanpete -->
<area shape="poly" title="" alt="" href="#" coords="223,399,224,346,169,346,166,353,162,353,159,358,152,364,152,376,148,381,133,382,128,397" /><!-- Sevier -->
<area shape="poly" title="" alt="" href="#" coords="323,150,245,152,243,152,243,126,232,135,221,137,216,142,208,145,204,154,207,156,212,167,208,173,200,171,203,180,204,190,211,189,215,183,220,189,233,196,239,193,247,195,252,184,256,177,262,182,267,177,287,175,304,169,323,171" /><!-- Summitt -->
<area shape="poly" title="" alt="" href="#" coords="13,256,18,147,113,149,134,141,156,183,158,201,155,205,158,216,160,233,157,251,145,259" /><!-- Tooele -->
<area shape="poly" title="" alt="" href="#" coords="325,171,334,174,359,169,361,177,369,173,369,164,382,165,384,171,387,184,395,186,397,298,393,302,323,303,322,293,326,276,332,270,325,269" /><!-- Uintah -->
<area shape="poly" title="" alt="" href="#" coords="258,269,256,260,242,259,231,247,229,235,225,224,215,222,214,218,207,216,202,207,204,194,197,198,191,198,175,209,169,204,165,207,156,204,158,217,158,226,161,233,157,241,159,248,162,253,162,258,165,265,165,272,173,267,185,257,190,266,188,269" /><!-- Utah -->
<area shape="poly" title="" alt="" href="#" coords="256,260,255,179,249,191,238,194,236,196,220,188,217,184,210,190,204,187,203,196,201,208,206,217,213,218,214,222,225,224,231,238,229,246,239,257,244,261" /><!-- Wasatch -->
<area shape="poly" title="" alt="" href="#" coords="6,485,50,485,50,493,68,495,69,500,79,500,86,500,98,499,95,549,3,547" /><!-- Washington -->
<area shape="poly" title="" alt="" href="#" coords="187,399,323,400,326,401,325,407,329,412,334,427,332,433,272,433,180,434,182,408" /><!-- Wayne -->
<area shape="poly" title="" alt="" href="#" coords="204,128,212,126,215,115,209,109,195,107,191,113,177,109,173,116,153,117,137,141,160,135,182,136,187,127,196,133" /><!-- Weber -->
<!-- Cutout -->
<area shape="poly" title="" alt="" href="#" coords="255,50,255,2,317,2,317,6,309,4,308,14,302,17,280,17" /><!-- BoxElder2 -->
<area shape="poly" title="" alt="" href="#" coords="316,2,357,2,357,6,352,5,342,7,335,6,332,13,321,8" /><!-- Cache2 -->
<area shape="poly" title="" alt="" href="#" coords="254,51,283,43,307,42,310,44,320,45,322,60,328,69,325,70,332,85,320,88,311,88,309,75,302,75,277,97" /><!-- Davis2 -->
<area shape="poly" title="" alt="" href="#" coords="400,33,400,2,357,2,356,6,366,13,373,13,382,22,381,32,385,33,385,44" /><!-- Rich2 -->
<area shape="poly" title="" alt="" href="#" coords="350,117,348,124,338,129,312,140,306,145,299,141,284,137,285,118,277,97,302,75,308,75,308,85,312,89,333,84,340,85,343,96" /><!-- SaltLake2 -->
<area shape="poly" title="" alt="" href="#" coords="400,33,400,120,396,127,373,116,368,113,368,109,364,109,360,114,358,120,351,118,344,100,342,90,350,94,356,92,359,85,356,70,348,68,348,64,353,58,364,53,369,52,373,47,387,43" /><!-- Summitt -->
<area shape="poly" title="" alt="" href="#" coords="282,146,280,140,285,138,284,121,281,104,254,53,255,146" /><!-- Tooele2 -->
<area shape="poly" title="" alt="" href="#" coords="349,146,345,143,349,137,347,125,336,129,315,137,307,145,300,139,285,139,281,139,283,146" /><!-- Utah2 -->
<area shape="poly" title="" alt="" href="#" coords="401,122,401,146,349,146,345,143,347,137,348,124,350,118,360,120,364,108,370,108,378,118,387,123,394,126" /><!-- Wasatch -->
<area shape="poly" title="" alt="" href="#" coords="255,51,280,16,302,16,308,14,309,5,312,6,318,5,327,10,331,12,336,6,356,6,365,14,364,21,361,29,357,32,353,30,347,32,345,36,335,38,330,34,326,35,318,40,321,45,309,43,283,44" /><!-- Weber -->
<area shape="poly" title="" alt="" href="#" coords="333,84,325,69,329,69,322,57,321,45,319,38,329,34,335,38,343,36,347,31,353,31,358,32,366,14,370,13,378,17,382,24,382,32,385,34,385,44,373,45,368,53,353,58,347,68,353,71,359,84,356,94,349,93,333,83" /><!-- Morgan -->
</map>
</td>
</tr>
</table>
<script type="text/javascript">
var tags = document.getElementsByTagName("area");
function ProcessTableData()
{
alert(mapzoom.version);
// alert(document.getElementById("eocTable").rows.length);
total = document.getElementById("eocTable").rows.length;
// alert("Rows = " + document.getElementsByTagName("tr").length);
var county = new Array();
var act = new Array();
var useColor = new Array();
var timeInfo = new Array();
var myColor ="";
for(var count = 0; count < total; count++)
{
countyName = document.getElementById("eocTable").rows[count].childNodes[0].textContent;
actStatus = document.getElementById("eocTable").rows[count].childNodes[1].textContent;
myColor = document.getElementById("eocTable").rows[count].childNodes[2].textContent;
time = document.getElementById("eocTable").rows[count].childNodes[3].textContent;
county[count] = countyName;
act[count] = actStatus;
useColor[count] = "pacolor" + myColor;
timeInfo[count] = time;
} // end for
// filter duplicates
for(var i = 1; i < county.length; ){
if(county[i-1] == county[i]){
// alert("1 = " + county[i-1] + " 2 = " + county[i] + i);
// alert("1 = " + county[i-1] + " " + act[i-1] + " " + useColor[i-1] + " " + timeInfo[i-1]);
county.splice(i, 1);
act.splice(i, 1);
useColor.splice(i, 1);
timeInfo.splice(i, 1);
} else {
i++;
}
}
initializeMap(county, act, useColor, timeInfo);
minwidth = document.getElementById("mainTable").offsetWidth;
minheight = document.getElementById("mainTable").offsetHeight;
} // end process Table Data
function initializeMap(county, act, useColor, timeInfo)
{
countyIndex = ["Beaver", "Box Elder", "Cache", "Carbon", "Daggett", "Davis", "Duchesne", "Emery", "Garfield", "Grand", "Iron", "Juab", "Kane", "Millard", "Morgan", "Piute", "Rich", "Salt Lake", "San Juan", "San Pete", "Sevier", "Summit", "Tooele", "Uintah", "Utah", "Wasatch", "Washington", "Wayne", "Weber"];
myTable = document.getElementById('displayTable');
var tags = document.getElementsByTagName("area");
for(count = 0; count < county.length - 1; count++)
{
//alert("first County = " + county[count] + "Activation = " + act[count] + "Count = " + count);
if (county[count].indexOf("County") > -1)
{
count++;
}
for(i = 0; i < countyIndex.length - 1; i++)
{
if (county[count].indexOf(countyIndex[i]) > -1)
{
//useColor[count]
//"specified pacolor00aa00 paopacity33 vaopacity0 noborder
tags[i].className = "specified " + useColor[count] + " paopacity33 vaopacity0 noborder";
myTable.rows[i].style.backgroundColor = "#" + useColor[count].slice(7,13);
myTable.rows[i].cells[1].innerHTML = act[count];
myTable.rows[i].cells[3].innerHTML = timeInfo[count];
}
}
}// end for
}// end function
</script>
</body>
</html>
<table id="eocTable">
<tr>
<td width="70px"><font style="background-color:#;">Beaver </font> </span></td>
<td width="20px"><font style="background-color:#4640ff;">2 </font> </span></td>
<td style="display: none;">4640ff</td>
<td selected="true">10/27/2011 14:34:52 </span></td>
</tr>
<tr>
<td width="70px"><font style="background-color:#;">Beaver </font> </span></td>
<td width="20px"><font style="background-color:#e00b00;">3 </font> </span></td>
<td style="display: none;">e00b00</td>
<td selected="true">10/27/2011 14:34:40 </span></td>
</tr>
<tr>
<td width="70px"><font style="background-color:#;">Kane </font> </span></td>
<td width="20px"><font style="background-color:#4640ff;">2 </font> </span></td>
<td style="display: none;">4640ff</td>
<td selected="true">11/01/2011 09:17:40 </span></td>
</tr>
<tr>
<td width="70px"><font style="background-color:#;">Piute </font> </span></td>
<td width="20px"><font style="background-color:#e00b00;">3 </font> </span></td>
<td style="display: none;">e00b00</td>
<td selected="true">11/01/2011 09:17:05 </span></td>
</tr>
<tr>
<td width="70px"><font style="background-color:#;">San Juan </font> </span></td>
<td width="20px"><font style="background-color:#f0ec00;">1 </font> </span></td>
<td style="display: none;">f0ec00</td>
<td selected="true">10/27/2011 14:35:00 </span></td>
</tr>
<tr>
<td width="70px"><font style="background-color:#;">Wayne </font> </span></td>
<td width="20px"><font style="background-color:#4640ff;">2 </font> </span></td>
<td style="display: none;">4640ff</td>
<td selected="true">11/01/2011 09:16:54 </span></td>
</tr>
</table>
IE did not like the fact that i was using .childNodes[0].textContent; to retrieve the info from the table that was generated by the cms. Nothing was being grabbed and as a result everything went null. Once i used innerhtml (yes some people warn against it I will update it later) it worked in IE and firefox. I did need to filter some of the html off of it.
If anyone is interested in the final code send me a message. Perhaps later this month i will have time to revamp this script.