adding functionality for hover effects, borders and colors around all pieces of the...

diff --git a/parts/community-map-svg.php b/parts/community-map-svg.php
index 6a464f9..ce537a3 100644 (file)
--- a/parts/community-map-svg.php
+++ b/parts/community-map-svg.php
@@ -63,7 +63,7 @@
                                        <clipPath id="SVGID_10_">
                                                <use xlink:href="#SVGID_9_"  overflow="visible"/>
                                        </clipPath>
-                                       <rect class="region-hover content-shape" data-id="981" id="walloon-lake-shape" x="160.882" y="261.336" clip-path="url(#SVGID_10_)" fill="#AC9ACA" width="7.255" height="8.046"/>
+                                       <rect class="walloon-lake region-hover content-shape" data-id="981" id="walloon-lake-shape" x="160.882" y="261.336" clip-path="url(#SVGID_10_)" fill="#AC9ACA" width="7.255" height="8.046"/>
                                </g>
                        </g>
                </g>
@@ -211,7 +211,7 @@
                                        <clipPath id="SVGID_18_">
                                                <use xlink:href="#SVGID_17_"  overflow="visible"/>
                                        </clipPath>
-                                       <polyline data-id="273" class="region-hover content-shape" id="petoskey-shape" clip-path="url(#SVGID_18_)" fill="#00A672" points="157.189,142.098 153.76,144.868 150.462,146.055 
+                                       <polyline data-id="273" class="petoskey region-hover content-shape" id="petoskey-shape" clip-path="url(#SVGID_18_)" fill="#00A672" points="157.189,142.098 153.76,144.868 150.462,146.055 
                                                148.747,148.034 146.769,149.353 145.846,149.353 145.054,150.144 143.735,150.144 142.812,149.748 140.042,150.54 
                                                133.975,152.65 131.996,154.101 130.15,154.76 126.984,157.398 126.852,163.993 133.843,164.125 133.975,167.291 
                                                140.833,167.291 140.965,170.984 147.692,171.116 152.309,177.975 155.87,181.272 158.904,182.196 159.168,159.905 
@@ -244,7 +244,7 @@
                                        <clipPath id="SVGID_24_">
                                                <use xlink:href="#SVGID_23_"  overflow="visible"/>
                                        </clipPath>
-                                       <path data-id="276" class="region-hover content-shape" id="bay-harbor-shape" clip-path="url(#SVGID_24_)" fill="#00A9A8" d="M116.432,159.641l0.791-3.297l-0.923-0.264l-1.187,0.395h-1.715
+                                       <path data-id="276" class="bay-harbor region-hover content-shape" id="bay-harbor-shape" clip-path="url(#SVGID_24_)" fill="#00A9A8" d="M116.432,159.641l0.791-3.297l-0.923-0.264l-1.187,0.395h-1.715
                                                l-3.561,0.264l-1.187-1.055l-0.923,0.132l-1.319,1.055l-6.727,1.451l-5.408,3.166l6.199-1.056l0.132,1.451l-1.055,1.583
                                                l-3.562,1.451l-4.352,1.187l0.791-2.506l-4.88,1.451h-3.034l-4.353-1.979l-3.561-1.055h-2.902l-1.451,0.396l-1.187-0.66
                                                l-3.297-0.527l-9.629,0.132l-1.846-0.264l-3.562-0.264l-1.319-0.527l-3.297,0.131l-0.264,6.991l38.383,0.923l0.132,2.375
@@ -278,7 +278,7 @@
                                        <clipPath id="SVGID_30_">
                                                <use xlink:href="#SVGID_29_"  overflow="visible"/>
                                        </clipPath>
-                                       <path data-id="274" class="region-hover content-shape" id="harbor-springs-shape" clip-path="url(#SVGID_30_)" fill="#00A6E3" d="M121.796,102.66l0.967-1.758l0.528-0.44v-2.638l0.527,0.088l0.177-0.704
+                                       <path data-id="274" class="harbor-springs region-hover content-shape" id="harbor-springs-shape" clip-path="url(#SVGID_30_)" fill="#00A6E3" d="M121.796,102.66l0.967-1.758l0.528-0.44v-2.638l0.527,0.088l0.177-0.704
                                                l1.846-0.088l1.143-0.967l3.342-0.088l0.879-0.703l0.879,0.439l0.352,0.792l1.231,0.088l3.077,1.583l0.352-0.968l0.44-0.176
                                                l0.044-1.055h1.187v-1.407h2.198v-0.967l-2.638,0.044l-0.791-0.66v-2.857h-2.989l0.043-4.134h-5.539l0.043-3.825h-1.934v3.87
                                                l-3.606,0.044l-0.263-0.484h-1.143l-0.264,0.484h-1.803l-0.043,4.088l-7.387-0.088v3.474l-2.198,0.044l-0.089,0.879
@@ -310,7 +310,7 @@
                                        <clipPath id="SVGID_36_">
                                                <use xlink:href="#SVGID_35_"  overflow="visible"/>
                                        </clipPath>
-                                       <polygon data-id="983" class="region-hover content-shape" id="alanson-shape" clip-path="url(#SVGID_36_)" fill="#D85480" points="260.907,74.785 260.643,89.382 275.328,90.437 275.504,75.401 
+                                       <polygon data-id="983" class="alanson region-hover content-shape" id="alanson-shape" clip-path="url(#SVGID_36_)" fill="#D85480" points="260.907,74.785 260.643,89.382 275.328,90.437 275.504,75.401 
                                                                                        "/>
                                </g>
                        </g>
@@ -339,7 +339,7 @@
                                        <clipPath id="SVGID_42_">
                                                <use xlink:href="#SVGID_41_"  overflow="visible"/>
                                        </clipPath>
-                                       <path data-id="275" class="region-hover content-shape" id="boyne-city-shape" clip-path="url(#SVGID_42_)" fill="#DE7046" d="M95.241,294.179l-5.276,0.264v9.321l1.319-0.968l2.99,0.264l0.791,0.352
+                                       <path data-id="275" class="boyne-city region-hover content-shape" id="boyne-city-shape" clip-path="url(#SVGID_42_)" fill="#DE7046" d="M95.241,294.179l-5.276,0.264v9.321l1.319-0.968l2.99,0.264l0.791,0.352
                                                l2.111-0.264l1.758-0.352l0.703-0.439l1.935,1.671l0.264,1.319l0.703,0.439l0.264,0.88l1.495,0.791l0.088,2.638l0.879,2.111
                                                l-0.263,1.934l-0.967,0.088l-1.408,2.11l0.089,1.319l-2.287,1.319l-1.231-0.175l-2.11,2.022l-4.924,2.638l-2.638-1.759
                                                l-2.287-0.352l-2.55-1.319l0.088,3.782c0,0,3.078,0.175,3.43,0.175c0.351,0,0.087,3.518,0.087,3.518h14.245l0.177,3.781
@@ -384,7 +384,7 @@
                                        <clipPath id="SVGID_50_">
                                                <use xlink:href="#SVGID_49_"  overflow="visible"/>
                                        </clipPath>
-                                       <rect class="region-hover" x="203.222" y="185.506" clip-path="url(#SVGID_50_)" fill="#00A672" width="206.292" height="219.482"/>
+                                       <rect x="203.222" y="185.506" clip-path="url(#SVGID_50_)" fill="#00A672" width="206.292" height="219.482"/>
                                </g>
                        </g>
                </g>
@@ -413,7 +413,7 @@
                                        <clipPath id="SVGID_56_">
                                                <use xlink:href="#SVGID_55_"  overflow="visible"/>
                                        </clipPath>
-                                       <path class="region-hover" clip-path="url(#SVGID_56_)" fill="#FFFFFF" d="M239.077,340.22l1.296-1.031l1.428-1.848l1.06-1.701l2.099-5.389
+                                       <path clip-path="url(#SVGID_56_)" fill="#FFFFFF" d="M239.077,340.22l1.296-1.031l1.428-1.848l1.06-1.701l2.099-5.389
                                                l2.304-3.576l0.891-1.896l1.682-6.689l0.494-5.54l-0.392-7.593l-1.983-5.94l1.226-1.687l-1.849,0.551l-4.294-10.282
                                                l-0.196-1.821l0.874-1.718l1.426-1.855l-0.932-5.666l-0.905-1.882l0.339-1.766l1.778-1.822l2.647-5.34l0.356-1.947
                                                l-0.198-1.818l0.646-3.183l-0.754-3.671l1.919-1.261l1.763-1.643l-0.021-1.805l2.632-3.182l1.735,0.696l1.593-1.654
@@ -681,30 +681,30 @@
                <circle clip-path="url(#SVGID_60_)" fill="none" stroke="#73BF45" stroke-width="8" cx="188.32" cy="188.32" r="184.32"/>
        </g>
 </g>
-<path data-id="274" class="region-hover content-shape" id="harbor-springs" fill="#00A6E3" d="M208.7,75.366c0-7.125-5.734-12.904-12.838-12.992v-0.008h-94.844v0.045
+<path data-id="274" class="harbor-springs region-hover content-shape" id="harbor-springs" fill="#00A6E3" d="M208.7,75.366c0-7.125-5.734-12.904-12.838-12.992v-0.008h-94.844v0.045
        c-6.758,0.464-12.1,6.079-12.1,12.955c0,6.876,5.342,12.49,12.1,12.955v0.045h94.844v-0.008
        C202.966,88.27,208.7,82.491,208.7,75.366z"/>
 <text data-id="274" class="region-hover-text content-shape" transform="matrix(1 0 0 1 99.6689 79.0857)" fill="#FFFFFF" font-family="'OpenSans-Bold'" font-size="13.19px">Harbor Springs</text>
-<path data-id="276" class="region-hover content-shape" id="bay-harbor" fill="#00A9A8" d="M125.728,149.2c0-7.125-5.734-12.904-12.838-12.992V136.2H38.907v0.046c-6.758,0.464-12.1,6.079-12.1,12.954
+<path data-id="276" class="bay-harbor region-hover content-shape" id="bay-harbor" fill="#00A9A8" d="M125.728,149.2c0-7.125-5.734-12.904-12.838-12.992V136.2H38.907v0.046c-6.758,0.464-12.1,6.079-12.1,12.954
        c0,6.876,5.342,12.49,12.1,12.955v0.045h73.982v-0.008C119.994,162.104,125.728,156.324,125.728,149.2z"/>
 <text data-id="276" class="region-hover-text content-shape" transform="matrix(1 0 0 1 39.1127 152.919)" fill="#FFFFFF" font-family="'OpenSans-Bold'" font-size="13.19px">Bay Harbor</text>
-<path class="region-hover content-shape" data-id="981" id="walloon-lake" fill="#AC9ACA" d="M179.505,250.033c0-7.125-5.734-12.904-12.838-12.992v-0.008H79.408v0.045
+<path class="walloon-lake region-hover content-shape" data-id="981" id="walloon-lake" fill="#AC9ACA" d="M179.505,250.033c0-7.125-5.734-12.904-12.838-12.992v-0.008H79.408v0.045
        c-6.758,0.464-12.1,6.079-12.1,12.955c0,6.876,5.342,12.49,12.1,12.955v0.045h87.259v-0.008
        C173.771,262.937,179.505,257.158,179.505,250.033z"/>
 <text class="region-hover-text content-shape" data-id="981" transform="matrix(1 0 0 1 79.1124 253.7524)" fill="#FFFFFF" font-family="'OpenSans-Bold'" font-size="13.19px">Walloon Lake</text>
-<path data-id="275" class="region-hover content-shape" id="boyne-city" fill="#DE7046" d="M195.336,305.2c0-7.125-5.734-12.904-12.838-12.992V292.2h-68.759v0.045
+<path data-id="275" class="boyne-city region-hover content-shape" id="boyne-city" fill="#DE7046" d="M195.336,305.2c0-7.125-5.734-12.904-12.838-12.992V292.2h-68.759v0.045
        c-6.758,0.464-12.1,6.079-12.1,12.955c0,6.876,5.342,12.49,12.1,12.954v0.046h68.759v-0.008
        C189.602,318.104,195.336,312.324,195.336,305.2z"/>
 <text data-id="275" class="region-hover-text content-shape" transform="matrix(1 0 0 1 113.4477 308.919)" fill="#FFFFFF" font-family="'OpenSans-Bold'" font-size="13.19px">Boyne City</text>
-<path data-id="985" class="region-hover content-shape" id="bay-view" fill="#E4C731" d="M248.238,135.033c0-7.125-5.734-12.904-12.838-12.992v-0.008h-59.841v0.045
+<path data-id="985" class="bay-view region-hover content-shape" id="bay-view" fill="#E4C731" d="M248.238,135.033c0-7.125-5.734-12.904-12.838-12.992v-0.008h-59.841v0.045
        c-6.758,0.464-12.1,6.079-12.1,12.955c0,6.876,5.342,12.49,12.1,12.954v0.046h59.841v-0.008
        C242.504,147.937,248.238,142.158,248.238,135.033z"/>
 <text data-id="985" class="region-hover-text content-shape" transform="matrix(1 0 0 1 176.1288 138.7524)" fill="#FFFFFF" font-family="'OpenSans-Bold'" font-size="13.19px">Bay View</text>
-<path data-id="273" class="region-hover content-shape" id="petoskey" fill="#00A672" d="M233.336,165.366c0-7.125-5.734-12.904-12.838-12.992v-0.008h-58.675v0.045
+<path data-id="273" class="petoskey region-hover content-shape" id="petoskey" fill="#00A672" d="M233.336,165.366c0-7.125-5.734-12.904-12.838-12.992v-0.008h-58.675v0.045
        c-6.758,0.464-12.1,6.079-12.1,12.955c0,6.876,5.342,12.49,12.1,12.955v0.045h58.675v-0.008
        C227.602,178.27,233.336,172.491,233.336,165.366z"/>
 <text data-id="273" class="region-hover-text content-shape" transform="matrix(1 0 0 1 161.5299 169.0857)" fill="#FFFFFF" font-family="'OpenSans-Bold'" font-size="13.19px">Petoskey</text>
-<path data-id="983" class="region-hover content-shape" id="alanson" fill="#D85480" d="M306.126,64.2c0-7.125-5.734-12.904-12.838-12.992V51.2h-52.677v0.045c-6.758,0.464-12.1,6.079-12.1,12.955
+<path data-id="983" class="alanson region-hover content-shape" id="alanson" fill="#D85480" d="M306.126,64.2c0-7.125-5.734-12.904-12.838-12.992V51.2h-52.677v0.045c-6.758,0.464-12.1,6.079-12.1,12.955
        c0,6.876,5.342,12.49,12.1,12.955V77.2h52.677v-0.008C300.392,77.104,306.126,71.324,306.126,64.2z"/>
 <text data-id="983" class="region-hover-text content-shape" transform="matrix(1 0 0 1 240.7426 67.919)" fill="#FFFFFF" font-family="'OpenSans-Bold'" font-size="13.19px">Alanson</text>
 </svg>

diff --git a/parts/community-map.php b/parts/community-map.php
index 761287e..5c7c7c2 100644 (file)
--- a/parts/community-map.php
+++ b/parts/community-map.php
@@ -65,12 +65,12 @@ foreach ($nav_posts as $p){
     jQuery(document).ready( function ($) {
         
         var site_array = <?php echo $js_sites ?>;
-        var id;
+        var id, fill, classes, target_class;
         var region = $('.region-hover');
-        var fill;
         var regionData = $('#mapRegionData');
         var community_link = $("#interactive-map");
         var default_content = <?php echo $community_page_content ?>;
+
        
         // set the default data next to the dropdown community map
         function set_default_data(){
@@ -89,22 +89,30 @@ foreach ($nav_posts as $p){
         // hover effects and data collection
         $(region).hover( function (){
             
+            fill = $(this).attr("fill");
+            classes = $(this).attr("class").split(' ');
+            target_class = classes[0];
+            
+//            console.log(target_class);
+            // create a border around the regions
+            $('.' + target_class).css("stroke", "green").css("stroke-width", "1px");
+            
             id = $(this).attr("data-id");
-            console.log(site_array[$(this).attr('data-id')]);
+            $('.' + target_class).attr("fill", "Red");
             
             regionData.find(".map-page-title").html(site_array[id]['title']);
             regionData.find(".map-image-container").css("height","200px").css("width", "250px").css("background", "url('" + site_array[id]['image'] + "')no-repeat center center").css("background-position", "cover");
             regionData.find(".map-page-content").html(site_array[id]['content']);
 
-            fill = $(this).attr("fill");
-            $(this).attr("fill", "red");
 
         }, function () {
-            $(this).attr("fill", fill) ;
+            $('.' + target_class).attr("fill", fill);
+            $('.' + target_class).css("stroke-width", "0px");
         });
 
         $(region).on("click", function (){
             window.location.href = site_array[id]['url'];
+            
         });
     });