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:
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.
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.
ReplyDeleteWhoops, 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.
DeleteThank you, it just saved me half an hour
ReplyDeleteWhy not making this piece of code more accessible so we can implement this?
ReplyDeleteMostly because I have too many other things to do!
DeleteThis 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.
.. 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.
DeleteAh 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!
DeleteI'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!
ReplyDeleteThank you so much!!! i really appreciate it.
ReplyDeletesaved my live
ReplyDeleteHi, in IE10 and Chrome (current version) the first red cirle doesn't resize correctly!
ReplyDeleteCheck it out!
@Daniele, it looks fine to me, I just tried in both.
DeleteThought this jQuery plugin that keeps an imageMap sized to an image as the pages scales might be of interest.
ReplyDeletehttps://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.
Now also works without jQuery.
DeleteThank 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!
ReplyDeleteTHANK YOU!!
ReplyDeleteHello,
ReplyDeleteI 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!