Map / area map update when resizing

Question

I make the main control page with different links on the image, now the only problem is that I want the image to fit the entire page and resize (window) if they compress it (to a certain extent) and increase it.

<img src ="image/main.jpg" style="width:100%;height:100%; min-width:600px; min-height:400px;" alt="Main" usemap="#MainMap"> <map name="MainMap"> <area id="login" class="login" shape="circle" coords="91,677,92"> <area id="money_management" class="money" shape="circle" coords="598,680,92"> <area id="withdraw_history" shape="circle" coords="596,304,67"> <area id="transaction_history" shape="circle" coords="784,624,67" href="History.html"> <area id="cart" shape="circle" coords="396,698,67,92"> <area id="buy" shape="circle" coords="898,352,92"> <area id="sell" shape="circle" coords="718,438,92"> <area id="new" shape="circle" coords="570,132,92" href="New.html"> </map> 

I had this before, when I took a static image and left it to work on something else, I wanted the coordinates to be updated after they resized the window, which I know how to detect cut size in jquery. I cannot find any example syntax when updating coordinates.

Answer 1

Here is a great jQuery plugin that does exactly what you wanted:

JQuery Plugin responsive image files

 /* * rwdImageMaps jQuery plugin v1.4 * * Allows image maps to be used in a responsive design by recalculating * the area coordinates to match the actual image size on load and * window.resize * * Copyright (c) 2012 Matt Stow * https://github.com/stowball/jQuery-rwdImageMaps * http://mattstow.com * Licensed under the MIT license */ 

Hope that helps

Answer 2

David Bradshaw has written a small, small library that solves this problem. It can be used with or without jQuery.

Available here: https://github.com/davidjbradshaw/imagemap-resizer

Answer 3

I ended up clearing the image map and using divs with absolute hyperlinks and resizing it to division. I wanted to avoid this, but guess what works, nothing is better.