I'm currently working on the following:
I have a big map of the world. On it, I have clickable areas, defined by image maps. What you can click on, are the countries, and those have a link that lead to a page about the country.
<img id="Image-Maps-Com-image-maps-2017-08-25-161100-img" src="worldmap.png" alt="" usemap="#image-maps-2017-08-25-161100" width="6460" height="3455" border="0" class="map" />
<map id="ImageMapsCom-image-maps-2017-08-25-161100" name="image-maps-2017-08-25-161100"></map>
An example for an area:
<area style="outline: none;" title="Portugal" alt="Portugal"
coords="2909.33349609375,1327.3333740234375,2913.33349609375,1324.3333740234375,2919.33349609375,1321.3333740234375,2921.33349609375,1329.3333740234375,2927.33349609375,1328.3333740234375,2936.33349609375,1328.3333740234375,2940.33349609375,1326.3333740234375,2949.33349609375,1331.3333740234375,2948.33349609375,1339.3333740234375,2945.33349609375,1343.3333740234375,2944.33349609375,1349.3333740234375,2945.33349609375,1358.3333740234375,2941.33349609375,1363.3333740234375,2939.33349609375,1371.3333740234375,2935.33349609375,1372.3333740234375,2932.33349609375,1373.3333740234375,2936.33349609375,1382.3333740234375,2938.33349609375,1392.3333740234375,2935.33349609375,1397.3333740234375,2940.33349609375,1406.3333740234375,2936.33349609375,1410.3333740234375,2933.33349609375,1416.3333740234375,2934.33349609375,1425.3333740234375,2922.33349609375,1427.3333740234375,2910.33349609375,1427.3333740234375,2912.33349609375,1417.3333740234375,2912.33349609375,1407.3333740234375,2914.33349609375,1398.3333740234375,2909.33349609375,1397.3333740234375,2907.33349609375,1398.3333740234375,2911.33349609375,1393.3333740234375,2910.33349609375,1390.3333740234375,2908.33349609375,1388.3333740234375,2903.33349609375,1392.3333740234375,2901.33349609375,1392.3333740234375,2903.33349609375,1380.3333740234375,2908.33349609375,1377.3333740234375,2911.33349609375,1366.3333740234375,2913.33349609375,1355.3333740234375,2914.33349609375,1346.3333740234375,2913.33349609375,1337.3333740234375"
shape="poly" href="portugal.html" target="_self"/>
What I'm now trying to achieve is a very cool feature (in my opinion), if it works:
When you hover over one area of the image map, the map should zoom in on this point (or even better: show exactly the part within the area in big). So the image is more then 6000px in width, but only displayed (on my monitor) in about 1000px.
So how cool would it be to have the map and when hovering over portugal, portugal is getting bigger (so like zoomed in), and when you hover out again, the normal map is there.
So this is an example of what I mean, first there is the normal map, and when hovering over portugal, it get's big.
Ofcourse, it shouldn't be that blurred (this is just because I did it in 2 minutes in paint) and as I said, the optimal thing would be to have exactly the borders of the area zoomed in.
I hope you got what I mean.
I tried around a bit with the css transform property, but first, I don't know when to change it, and second, I have no idea how to choose that specific part of the map.
Using Javascript/jQuery would be no problem, if needed.
