New Svg Map

by Dale Howard

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="4">
    <input name="FROM" type="hidden" value="INLINE">
    <!--//will be used under the UDF numeric check -->
    <tbody>
        <tr>
            <input name="UDF_CHAR2" id="UDF_CHAR2_hid" type="hidden" value="" data-field="UDF_CHAR2">
            <input name="UDF_CHAR3" id="UDF_CHAR3_hid" type="hidden" value="true" data-field="UDF_CHAR3">
            <td width="15%" class="alignRight" valign="top"> <span class="mandatory">*</span>
MFH Location</td>
            <td width="35%" valign="top">
                <select name="UDF_CHAR1" class="formStyle" style="width: 85%;" data-field="UDF_CHAR1">
                    <option value="0">-- Select MFH Location --</option>
                    <option value="Aldersgate">Aldersgate</option>
                    <option value="Benton Day Tx">Benton Day Tx</option>
                    <option value="Camp Aldersgate Day Tx">Camp Aldersgate Day Tx</option>
                    <option value="Dacus RTC">Dacus RTC</option>
                    <option value="Fillmore">Fillmore</option>
                    <option value="GH - ES - Little Rock">GH - ES - Little Rock</option>
                    <option value="GH - Fayetteville">GH - Fayetteville</option>
                    <option value="GH - Heber Springs">GH - Heber Springs</option>
                    <option value="GH - Helena">GH - Helena</option>
                    <option value="GH - John Magale">GH - John Magale</option>
                    <option value="GH - Magale Manor">GH - Magale Manor</option>
                    <option value="GH - Mulberry Girls">GH - Mulberry Girls</option>
                    <option value="GH - Searcy">GH - Searcy</option>
                    <option value="Jonesboro - Stone Street">Jonesboro - Stone Street</option>
                    <option value="Magale Day Tx">Magale Day Tx</option>
                    <option value="Maumelle">Maumelle</option>
                    <option...

CSS

.map {
}
.showMap {
    display: inline;
}
.hideMap {
    display: none;
}
path[id^="building"]:hover {
    opacity: 0.5;
}

JavaScript

//Declare all Map Divs and assign className and id attribute

var divNames = ["aldersgate", "fillmore", "maumelle", "dayTx", "building1", "building2", "building3", "building4", "building5", "building6", "building7", "building8", "building9", "building10", "building11", "building12", "building13", "building14", "building15"];



    divNames.forEach(function (divName){
        window[divName + "MapDiv"] = document.createElement('div');
        window[divName + "MapDiv"].setAttribute("id", divName);
        window[divName + "MapDiv"].className = "map hideMap";
    });





//declare various states that help out with highlighting logic and map navigation

var lastRoomClicked = '';
var lastMapClicked = '';

//Declare all HTML strings for Map Divs
//maps included: aldersgateMapHTML, fillmoreMapHTML, maumelleMapHTML, dayTXMapHTML



var building13HTML = '<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" id="svg2" height="81.58mm" width="73.023mm" version="1.1" viewBox="0 0 258.74422 289.06332"><style>.style0{stroke-opacity:	0;}.style1{opacity:	0.01;stroke:	#fff;stroke-width:	.35714;fill:	#6db291;}.style2{opacity:	0.01;stroke:	#15a782;stroke-width:	.35714;fill:	#6db291;}.style3{opacity:	0.01;fill:	#6db291;}.style4{font-size:	15px;letter-spacing:	0px;text-anchor:	end;word-spacing:	0px;text-align:	end;font-family:	sans-serif;line-height:	125%;fill:	#000000;}.style5{font-size:	15px;letter-spacing:	0px;text-anchor:	middle;word-spacing:	0px;text-align:	center;font-family:	sans-serif;line-height:	125%;fill:	#000000;}</style><g id="layer1" transform="translate(-540.73 -1075.5)"><path id="outline" d="m747.48 1350.8c-63.479 0.1471-71.933 0.1427-146.25-0.1382l-60-0.2271 0.12171-128.75 0.1217-128.75 45-0.039c24.75-0.021 63-0.022 85 0 22 0 59.7 0.1 83.8 0.1612l43.75 0.1233-0.12171 128.75-0.1217 128.75-51.25 0.1187zm31.294-46.391-17.5-0.016-0.002...