Posted By

xtknight on 06/28/10

Tagged

image

Versions (?)

Last Edited at 06/28/10 09:14am

Statistics

Viewed 661 times

Favorited by 0 user(s)

Related snippets

Variable-sized Image Map, version 0.01

/ Published in: JavaScript

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".

Highlighted TextExpand

/*
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:

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;
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.