CODEWITHSUNDEEP
jqueryhtmlcssmaps
Davtho1983
Davtho1983

Reputation: 3954

JQuery hover over map location changes location size

I am creating a map on a website for a local arts trail. Our graphic designers have come up with an excellent, very distinctive, stylised map (think London Underground map) where each location marker is our logo.

Each logo location needs to change size when hovered over, then change colour when clicked - I can think of a way to change the colour using the area tag, but I really want the location logo image to get larger when hovered on.

Any ideas?

Upvotes: 0

Views: 82

Answers (1)

cssBlaster21895
cssBlaster21895

Reputation: 3710

Think of using svg and add classes to your objects, no need to use area tag and your graphic will be always sharp.

First scaling: here you can use pure css3 solution as @odedya mentioned inside comment:

.element:hover {
  transform: scale(20);
}

Second: changing color of your svg marker on click:

$('.marker').on("click", function() {
    $('#path').css({ fill: "#000000" });
});

Also think of range of browsers you need to support, if lower than ie9 check for compatibility. http://caniuse.com/#feat=svg. Also note on transform - maybe you need some prefixes. http://caniuse.com/#search=transform. Even for ie9 and safari you need ms- and -webkit prefixes.

Also one more thing, if you want to keep events particular sequence, you can control it better with js/jquery, so use mouseover event to get desired effect and afterwards allow to click. I don't know to much about animating transform scale, but you can use plugin. Than try something like:

$('.marker').mouseenter(function() {
    $(this).animate({ transform: 1.2 });
}).click(function() {
    $('#path').css({ fill: '#333333' });
  });

Upvotes: 1

Related Questions