//this javascript is combination of techniques from the following articles //'Super-Efficient Image Rollovers' http://www.oreillynet.com/pub/a/javascript/2003/07/01/bonusrecipe.html //'CSS Sprites' http://www.alistapart.com/articles/sprites/ //it has been tested/works in // IE 6 (IE 5.5 should work) // IE 5.2 Mac // Firefox / Netscape 6, 7.1 (Not Netscape 4.7) // Safari 2 (I'm pretty sure Safari 1.3 should work) // Opera 8 // the states array keeps track the info for each state var states = new Array(); //this function creates a state object encapsulating the following properties: //overImg: there are 4 overstate PNGs A-D, this identifies which image contains a state's overstate //clippingRect: this is a string that identifies the clipping rectangle that contains a state //the rectangle is rect(TOP, RIGHT, BOTTOM, LEFT) function state(overImg, clippingRect){ this.overImg = overImg; this.clippingRect = clippingRect; } //this function sets up the event handlers for the areas in the image map //it can take a list of image map IDs as arguments function initMaps() { if (document.getElementById) { var mapIds = initMaps.arguments; // the list of image maps we are going to add event handlers var i, j, area, areas; for (i = 0; i < mapIds.length; i++) { areas = document.getElementById(mapIds[i]).getElementsByTagName("area"); //add the event handlers for (j = 0; j < areas.length; j++) { area = areas[j]; area.onmousedown = imgSwap; area.onmouseout = imgSwap; area.onmouseover = imgSwap; area.onmouseup = imgSwap; area.onclick = imgSwap; } } //initialize the states array states['AL'] = new state( 'D', 'rect(214px,389px,279px,349px)'); states['AK'] = new state( 'C', 'rect(270px,120px,366px,11px)'); states['AZ'] = new state( 'D', 'rect(177px,141px,260px,72px)'); states['AR'] = new state( 'B', 'rect(198px,334px,247px,283px)'); states['CA'] = new state( 'B', 'rect(89px,84px,231px,4px)'); states['CO'] = new state( 'B', 'rect(133px,214px,193px,140px)'); states['CT'] = new state( 'A', 'rect(98px,504px,117px,470px)'); states['DE'] = new state( 'B', 'rect(135px,487px,154px,462px)'); states['DC'] = new state( 'C', 'rect(149px,482px,177px,447px)'); states['FL'] = new state( 'A', 'rect(263px,452px,336px,360px)'); states['GA'] = new state( 'B', 'rect(211px,431px,271px,375px)'); states['HI'] = new state( 'A', 'rect(300px,300px,366px,100px)'); states['ID'] = new state( 'D', 'rect(17px,136px,118px,76px)'); states['IL'] = new state( 'D', 'rect(118px,353px,193px,312px)'); states['IN'] = new state( 'A', 'rect(125px,379px,181px,348px)'); states['IA'] = new state( 'B', 'rect(107px,325px,149px,264px)'); states['KS'] = new state( 'C', 'rect(153px,284px,195px,210px)'); states['KY'] = new state( 'B', 'rect(159px,409px,199px,335px)'); states['LA'] = new state( 'D', 'rect(245px,347px,297px,290px)'); states['ME'] = new state( 'A', 'rect(22px,525px,85px,488px)'); states['MD'] = new state( 'D', 'rect(137px,490px,165px,427px)'); states['MA'] = new state( 'C', 'rect(85px,515px,104px,477px)'); states['MI'] = new state( 'C', 'rect(53px,394px,128px,318px)'); states['MN'] = new state( 'D', 'rect(32px,326px,110px,259px)'); states['MS'] = new state( 'A', 'rect(217px,353px,282px,317px)'); states['MO'] = new state( 'A', 'rect(145px,340px,206px,272px)'); states['MT'] = new state( 'B', 'rect(19px,203px,87px,100px)'); states['NE'] = new state( 'D', 'rect(112px,277px,155px,194px)'); states['NV'] = new state( 'A', 'rect(99px,104px,202px,39px)'); states['NH'] = new state( 'B', 'rect(56px,515px,93px,468px)'); states['NJ'] = new state( 'C', 'rect(113px,487px,146px,464px)'); states['NM'] = new state( 'A', 'rect(185px,201px,261px,130px)'); states['NY'] = new state( 'D', 'rect(64px,495px,125px,419px)'); states['NC'] = new state( 'D', 'rect(178px,474px,219px,386px)'); states['ND'] = new state( 'A', 'rect(34px,265px,77px,199px)'); states['OH'] = new state( 'D', 'rect(117px,416px,166px,374px)'); states['OK'] = new state( 'D', 'rect(192px,286px,239px,199px)'); states['OR'] = new state( 'C', 'rect(36px,91px,107px,10px)'); states['PA'] = new state( 'A', 'rect(106px,472px,146px,413px)'); states['RI'] = new state( 'B', 'rect(95px,534px,117px,490px)'); states['SC'] = new state( 'A', 'rect(206px,451px,247px,399px)'); states['SD'] = new state( 'C', 'rect(73px,267px,123px,196px)'); states['TN'] = new state( 'C', 'rect(189px,411px,219px,328px)'); states['TX'] = new state( 'C', 'rect(198px,297px,341px,157px)'); states['UT'] = new state( 'C', 'rect(112px,148px,186px,91px)'); states['VT'] = new state( 'A', 'rect(56px,487px,93px,468px)'); states['VA'] = new state( 'A', 'rect(146px,470px,192px,393px)'); states['WA'] = new state( 'B', 'rect(5px,96px,56px,28px)'); states['WV'] = new state( 'C', 'rect(134px,446px,181px,400px)'); states['WI'] = new state( 'A', 'rect(62px,350px,121px,297px)'); states['WY'] = new state( 'A', 'rect(78px,199px,139px,129px)'); states['FW'] = new state('A', 'rect(388px,61px,405px,8px)'); states['RM'] = new state('A', 'rect(388px,152px,405px,64px)'); states['SW'] = new state('A', 'rect(388px,219px,405px,156px)'); states['PL'] = new state('A', 'rect(388px,264px,405px,223px)'); states['SE'] = new state('A', 'rect(388px,327px,405px,269px)'); states['GL'] = new state('A', 'rect(388px,397px,405px,330px)'); states['EM'] = new state('A', 'rect(388px,454px,405px,402px)'); states['EN'] = new state('A', 'rect(388px,530px,405px,457px)'); } } function popUp(URL) { day = new Date(); id = day.getTime(); eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=500,left = 326,top = 207');"); } function MM_jumpMenu(targ,selObj,restore){ //v3.0 /*eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0;*/ popUp('state_by_state-view2008.php?area='+selObj.options[selObj.selectedIndex].value); } function imgSwap(evt) { // equalize event models evt = (evt) ? evt : event; //get the name of the area element var elem = (evt.target) ? evt.target : evt.srcElement; //trim that name into a two letter state abbreviation var state = elem.id.substr(elem.id.length-2,2); //for debugging //if(!state && states[state] && (typeof states[state].overImg == "undefined")){ // alert(state); //} var imgStyle,imgSrc,clipVal; switch (evt.type) { case "onclick": /*document.forms['map'].elements['area'].value = state; document.forms['map'].submit();*/ popUp('state_by_state-view2008.php?area='+state); break; case "mousedown" : /*document.forms['map'].elements['area'].value = state; document.forms['map'].submit();*/ popUp('state_by_state-view2008.php?area='+state); break; case "mouseout" : //hide the over state if(states[state].overImg && (typeof states[state].overImg != "undefined")){ imgSrc = states[state].overImg; document.getElementById( "mapOver"+imgSrc).style.visibility = "hidden"; } break; case "mouseover" : //get the name/suffix of the image with state's overstate imgSrc = states[state].overImg; clipVal = states[state].clippingRect; imgStyle = document.getElementById("mapOver"+imgSrc).style; if(imgStyle.visibility != "visible"){ //set css clipping rectangle, make image visible imgStyle.clip = clipVal; imgStyle.visibility = "visible"; } break; case "mouseup" : // guarantee click in IE if (elem.click) { elem.click(); } break; } evt.cancelBubble = true; return false; } function submitRegion(rg){ /*document.forms['map'].elements['area'].value = rg; document.forms['map'].submit();*/ popUp('state_by_state-view2008.php?area='+state); }