Logic Problem

[Eric O]

I have 2 images - that are proportional, but different sizes. One is 201px wide and 272px tall. The other is 442px wide and 596 px tall.

I have a small 80X90 box (div) placed on the small image (covering, for example someone's face). I would like to transform the same box onto the second image. In other words, the same person's face should be covered by the <div> on the larger image.

I know the coordinates of the box in the first (smaller image); and expect the box to get larger in the larger image. The algorithmn should be screen-resolution independent.


Please help.

[old np]

Get the x and y of the div as compared to the small image, multiply it by how many times bigger the bigger image is, add it to the x and y of the big image, and that's the x and y of the big div. Do a similar thing for size. If you're having trouble, you'll have to tell us exactly what you're stuck on.

[texmex]

If I understand you correctly. You have one div (that I shall call maskthing) that is obscuring something. You then want to change the size and position of the maskthing, so that it now covers another item ALSO. (ie continues to cover the area it is already covering AND the new object).

Obviously you realise that it will, potentially, need to be resize AND change the position of the maskthing. The way I would do it would be similar to below.

Code: Select all

function resizeMaskThing(newobject)
{
var xTop=calcTopPosition(newobject);
var xLeft=calcLeftPosition(newobject);
var xHeight=parseInt(newobject.style.height);
var xWidth=parseInt(newobject.style.width);

var mask=document.getElementById("maskThing");
var mTop=parseInt(mask.offsetTop);
var mLeft=parseInt(mask.offsetLeft);
var mHeight=parseInt(mask.style.height);
var mWidth=parseInt(mask.style.width);


//First determine which is the furthest left top (new object or current div)
var newtop=(xTop<mTop)? xTop:mTop;
var newleft=(xLeft<mLeft)? xLeft:mLeft;

//Next determine most extreme right and bottom between the two objects
var newbottom=((xTop+xHeight)>(mTop+mHeight))? xTop+xHeight:mTop+mHeight;
var newright=((xLeft+xWidth)>(mLeft+mWidth))? xLeft +xWidth:mLeft + mWidth;

//The vars newtop, newleft, newbottom, newright Now hold the area to be covered

mask.style.top=newtop + "px";
mask.style.left=newleft + "px";
mask.style.height=(newbottom-newtop) + "px";
mask.style.width=(newright - newbottom) + "px";
}


Please note I have just typed this straight in, so you will probably have to debug it and correct the odd syntax error here or there, but hopefully it will clarify the logic of what you need to achieve.