Resize Html Map Images

In a small website where the pages are only composed by a single image with multiple links using html map, I want to resize the images (smaller images) but it is extremely painful

Solution 1:

You may zoom/scale the div,

example(half size):

style="zoom:.5;-o-transform: scale(.5);-moz-transform: scale(.5)"

Solution 2:

Here's a little lib that solves this problem.

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

Solution 3:

I think the best solution would be to resize the images and then write a small script that will allow you to select a rectangle (or simply click 4 times on the image), prompt for entering and URL and then spit out the HTML for that rectangle. This way it would be much faster to generate the map.

If you see yourself doing this again in the future, it would be better to build the map with real links positioned with CSS, but with the top & left coordinates specified as percentages relative to the image. This way you should be imune to size changes (but not to changing the image entirely).