From ef70ec9f0ad189062dc4994563d747344017916d Mon Sep 17 00:00:00 2001 From: Anthony Talarico Date: Thu, 11 Aug 2016 15:58:59 -0400 Subject: [PATCH] adding functionality for hover effects, borders and colors around all pieces of the svg image for the dropdown map --- parts/community-map-svg.php | 30 +++++++++++++++--------------- parts/community-map.php | 20 ++++++++++++++------ 2 files changed, 29 insertions(+), 21 deletions(-) diff --git a/parts/community-map-svg.php b/parts/community-map-svg.php index 6a464f9..ce537a3 100644 --- a/parts/community-map-svg.php +++ b/parts/community-map-svg.php @@ -63,7 +63,7 @@ - + @@ -211,7 +211,7 @@ - - - - @@ -339,7 +339,7 @@ - - + @@ -413,7 +413,7 @@ - - Harbor Springs - Bay Harbor - Walloon Lake - Boyne City - Bay View - Petoskey - Alanson diff --git a/parts/community-map.php b/parts/community-map.php index 761287e..5c7c7c2 100644 --- 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 = ; - 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 = ; + // 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']; + }); }); -- 2.17.1