Insights and discoveries
from deep in the weeds
Outsharked

Image Map Resizer

If you're looking for a tool to create image maps by tracing an image, go to http://www.image-mapper.com/. It's simply the best, easiest tool there is, and for some reason it's impossible to find with Google. I hope this link helps.

This tool will resize an existing image map (the area data in the map section) so it will work with the same image when displayed at a different size.

Paste the source HTML below, enter a new height or width, and click "Resize It." (To see a demo, just enter a height or width and click "Resize It." The sample code shown in grey will be used). You must include both the img and map markup, and the image must properly refer to the imagemap with usemap. The image must either include a valid url for its src, or include height and width attributes. If the image can be loaded, its actual height and width will be used, otherwise, the values in the height and width attributes will be used. Example:

Source HTML:

Leave either X or Y blank below to maintain the aspect ratio. The other dimension will be calculated for you.

New Size: x:   y:

Optionally enter a bounding area and the map will be clipped to within that area.

Top left: x   y:
Bottom right: x   y:

Resize It

Resized HTML:


Resized demo:

If the code you used has a valid image URL, the resized map should be rendered below and bound using ImageMapster to activate hotspots on mouseover.

17 comments:

  1. Alas the Resize button is completely broken in Forefox 10 and Google Chome 17. In inTnert Explorer 8 it is clickable, alas when clicked does nothing. So this is not what I'd call agreat example of portable Javascript it seems. A a shame as it's just what I need right now.

    ReplyDelete
    Replies
    1. Whoops, I updated jQuery on the whole blog to 1.7.1 a few days ago which broke the click binding to the "resize" button. It's fixed now. While I was in there, I added a feature so it will automatically detect the image size if you paste in code with a valid image URL. Give it another try.

      Delete
  2. Thank you, it just saved me half an hour

    ReplyDelete
  3. Why not making this piece of code more accessible so we can implement this?

    ReplyDelete
    Replies
    1. Mostly because I have too many other things to do!

      This was really a one off. Similar code eventually became part of my image map manipulation plugin:

      https://github.com/jamietre/ImageMapster

      Most of the code on this page involves dealing with the user interface, the actual code & math to resize the area data is only a few lines. See function "resizeMapData":

      https://github.com/jamietre/ImageMapster/blob/master/src/scale.js

      I don't think it would take too much effort to adapt the basic idea to a particular purpose.

      Delete
    2. .. i realize now of course the "resize" function in the plugin has no bearing on how you would do this out of context, since it depends on the ImageMapster object model. But the point is this is a very simple algorithm. You take the value of the "coords" attributes, use string.split to turn into an array, and multiply each value by a scale factor. Use "join" to turn back to a string, and update the original. That's all. The complexity is in the implementation, not the basic algortihm.

      Delete
    3. Ah thanks, but I've just realized you have implemented a resize method for mapster. That one works great. Great plugin and keep up the good work!

      Delete
  4. I've yet to use this, but it looks promising! This will save me so much time when I implement a resizing function on my map!

    ReplyDelete
  5. Thank you so much!!! i really appreciate it.

    ReplyDelete
  6. Hi, in IE10 and Chrome (current version) the first red cirle doesn't resize correctly!
    Check it out!

    ReplyDelete
    Replies
    1. @Daniele, it looks fine to me, I just tried in both.

      Delete
  7. Thought this jQuery plugin that keeps an imageMap sized to an image as the pages scales might be of interest.

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

    You just need to add the image map to the page and then call $('map').imageMapResize(); for it to work.

    ReplyDelete
  8. Thank you so much for this tool! Saved me 10 hours of work re-doing all of my image-maps that I had made too big!

    ReplyDelete
  9. Hello,

    I am a complete novice to coding. My question is about rescaling existing image mapping code for a wordpress website. I have managed to map an image the way I want it, but want to keep the coordinates the way I have it when it resizes because it's a responsive theme. I have tried installing the jquerty plugin onto the wordpress site and nothing happens. Is there anyway to apply this to the coding itself perhaps wherever the code exists already? If so what coding do I need to place and where?

    Thank you for your help!

    ReplyDelete