lucy24 - 3:33 pm on Apr 15, 2013 (gmt 0)
onmouseover = "growIt(this,250,300,500,600,0)" onmouseout = "shrinkIt(this,250,300,500,600,0)"
Yes, the two sets of numbers are identical.
var object, direction, stepcount = 1, fraction = 40, growtime = 20, leftpos;
var smwidth, smheight, lgwidth, lgheight;
object = ii;
direction = 1;
direction = -1;
function setValues(w1, h1, w2, h2, lf)
smwidth = w1;
smheight = h1;
lgwidth = w2;
lgheight = h2;
leftpos = lf;
var width = Math.round(xy(smwidth,lgwidth));
var height = Math.round(xy(smheight,lgheight));
if(leftpos) object.style.left = (smwidth-width) + "px";
object.style.width = width + "px";
object.style.height = height + "px";
if(direction > 0 && stepcount < fraction)
else if(direction < 0 && stepcount > 0)
return (second-first)*(stepcount/fraction) + first;
I renamed all the variables to make their function more obvious. As coded, the function can only be used on one element on the page, because it's all done with global variables. Change them to arrays if you need to have zooming and popping going on in more than one place. Preferably on a page NOT devoted to selling men's underwear.
It all comes down to the
function, where "object" is a handle to the thing you're resizing. Everything else is window dressing.
Most easily done in a segment generated by php so you can ensure that the object's starting width and height match the numbers passed to the function.
The last value reflects-- the one that's 0 in the html-- the object's position ("left" in CSS). It isn't used in this particular page; presumably lots of other pages draw on the same code.