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

//handy copy/paste elements for various maps. 
// add this to all fillmore building maps: <button onclick="myFunction()">Back to Fillmore</button>

//Declare all Map Divs

var fillmoreMapDiv = document.createElement('div');

var aldersgateMapDiv = document.createElement('div');

var maumelleMapDiv = document.createElement('div');

var building13MapDiv = document.createElement('div');




var currentMap = ''; // only changes when someone enters a Fillmore building, this is cleared each time the location drop down
// changes, but then the event this target is recorded in the variable, and used with the back button on each Fillmore building. 


//Assign the map and hideMap class to each Div, also the the id's of each
//Div that will hold a map
// aldersgate, fillmore, maumelle, day tx, dacus, building 1 thru 15 at Fillmore Campus (15 maps)
//total maps = 20
fillmoreMapDiv.className = "map hideMap";
fillmoreMapDiv.setAttribute("id", "fillmoreMap");

aldersgateMapDiv.className = "map hideMap";
aldersgateMapDiv.setAttribute("id", "aldersgateMap");

maumelleMapDiv.className = "map hideMap";
maumelleMapDiv.setAttribute("id", "maumelleMap");

building13MapDiv.setAttribute("id", "building13");
building13MapDiv.className = "map hideMap";

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

var aldersgateMapHTML = '';

var maumelleMapHTML = 'Maumelle SVG Map';


var lockedRoom = false;
var lastRoomClicked = '';
var lastMapClicked = '';


var node = document.getElementsByName("FROM")[0].parentNode.children[1];




var fillmoreMapHTML = '<h1>Little Rock, Fillmore Campus</h1><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="svg5349" height="117.51mm" viewBox="0 0 542.94324 416.3736" width="153.24mm"...