I'm currently trying to make a responsive image map where we can also zoom on specific areas.
For the moment I have something like that (illustration):
I have for example 3 sections for 3 different area but now what I wan't is to zoom in a specific area when the user click on it. I already tried a few jquery script but the problem is that it zoom everything and the area don't resize by themselves (but when we reduce the window, it does).
I would like something like that: http://preview.codecanyon.net/item/mapplic-custom-interactive-map-jquery-plugin/full_screen_preview/6275001?redirect_back=true&ref=coolansh63
When you click on it, it just zoom where you want to go.
For now here is the code that I have:
https://jsfiddle.net/brch3rn9/
<html>
<head>
<link rel="stylesheet" type="text/css" href="Mapify/src/mapify.scss">
<link rel="stylesheet" type="text/css" href="css2.css">
</head>
<body>
<div>
<img id="test" src="flag.png" alt="" usemap="#Map" height="500px" width="488px"/>
</div>
<map name="Map" id="Map">
<area alt="" title="1" id="TXXX" href="#" shape="poly" coords="355,72,362,422,475,435,472,83"/>
<area alt="" title="2" id="TXX" href="#" shape="poly" coords="190,463,357,471,345,67,184,81"/>
<area class="1" alt="" title="3" id="TX" href="#" shape="poly" coords="87,438,187,459,181,78,12,98"/>
</map>
<footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="Mapify/src/mapify.js"></script>
<script>
$("img[usemap]").mapify({
popOver: {
content: function(zone){
return "<strong>"+zone.attr("data-title")+"</strong>";
},
delay: 0.7,
margin: "15px",
height: "130px",
width: "260px"
}
});
</script>
</footer>
</body>
EDIT : I manage to make a zoom with the mouse wheel but now there is another problem, the map area doesn't resize and thus, they get offset. Is there any way to zoom where the user click only?
