Revision: 27949
Updated Code
at June 28, 2010 09:19 by xtknight
Updated Code
/* If you have an image map like this: <map id="_rightact" name="rightact"> <area id="rightactarea" shape="poly" href="http://www.image-maps.com/" onmouseover="hideBox();" alt="" /> </map> Notice how I omit the coords in the <area> tag. This is because I will fill them in later. You choose a base size, and go somewhere like image-maps.com and map your image out against that base size (which should be the initial size of the image, or maybe even a really high resolution if you want precision). THEN, save those coords it gives you and use them as your "base coordinates". At the end of your body tag you should put something like this: <script> area_resize('rightactarea', 1024, 768, '946,0,8,4,2,765,1022,740,1022,664,653,447,651,350,', $('#rightact').width(), $('#rightact').height()); </script> I put in the id of the particular 'area' I'm resizing, the base width, base height, set of base coordinates from image-maps.com, and then the width and height to which I want to resize the map (through jQuery it gets the pixel size of the source picture which was CSS-styled to be width:100%;height:100%). Remember, call area_resize for every area inside your map. Here is the area_resize function. It can be improved to support shape="rect" and shape="circle" (should be simple), and a map_resize function can be created to resize anything inside the area, too. Please refine, solidify, and test this to your heart's delight, and clean it up. =) I literally could find nothing like this anywhere so this is why I submitted this proof of concept. -- SORRY, I DON'T KNOW HOW TO PUT CODE IN THE COMMENTS -- */ function area_resize(areaId, baseWidth, baseHeight, baseCoords, newWidth, newHeight) { // supports "poly" right now, potentially others later // coords format: x1,y1,x2,y2,..,xn,yn //alert(newWidth + 'x' + newHeight); var newCoords = ""; var baseCoordsArray = String(baseCoords).split(","); for (var i = 0; i < baseCoordsArray.length; i++) { if (String(baseCoordsArray[i]).length > 0) { if (i % 2 == 0) { // x coordinate newCoords += String(parseInt((newWidth / baseWidth) * parseInt(String(baseCoordsArray[i])))); } else { // y coordinate newCoords += String(parseInt((newHeight / baseHeight) * parseInt(String(baseCoordsArray[i])))); } } if (i < baseCoordsArray.length - 1) newCoords += ","; } document.getElementById(areaId).coords = newCoords; }
Revision: 27948
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at June 28, 2010 09:14 by xtknight
Initial Code
function area_resize(areaId, baseWidth, baseHeight, baseCoords, newWidth, newHeight) { // supports "poly" right now, potentially others later // coords format: x1,y1,x2,y2,..,xn,yn //alert(newWidth + 'x' + newHeight); var newCoords = ""; var baseCoordsArray = String(baseCoords).split(","); for (var i = 0; i < baseCoordsArray.length; i++) { if (String(baseCoordsArray[i]).length > 0) { if (i % 2 == 0) { // x coordinate newCoords += String(parseInt((newWidth / baseWidth) * parseInt(String(baseCoordsArray[i])))); } else { // y coordinate newCoords += String(parseInt((newHeight / baseHeight) * parseInt(String(baseCoordsArray[i])))); } } if (i < baseCoordsArray.length - 1) newCoords += ","; } document.getElementById(areaId).coords = newCoords; }
Initial URL
Initial Description
Hey, I just thought I would share something I made that I tested in IE6, IE8, Firefox 3.6, and Chrome 4. It allows you to resize a client-side image map based on the size of the image, so when your image resizes, your map still works how you want it to. This is my first revision. There are a lot of easy improvements to be made. I'll post them sometime later. It should support "rect" but I only tested it with "poly". Might even work with "circle".
Initial Title
Variable-sized Image Map, version 0.01
Initial Tags
image
Initial Language
JavaScript