iframe gradual zoom

[Z1P2]

I would like to gradually resize an iframe in an onmouseover event.
I can easily do it with an image, but when I try to do it with an iframe, it doesn't do anything. So first of all, is it possible to gradually zoom an iframe, and if so, what am I missing?


Here is the script I am trying to manipulate, between the head tags:

<script language=JavaScript>
 
/**** adjust these two parameters to control how fast or slow
**** the iframes grow/shrink ****/
 
// how many milliseconds we should wait between resizing events
 
var resizeDelay = 10;
 
// how many pixels we should grow or shrink by each time we resize
 
var resizeIncrement = 5;
 
// this will hold information about the iframes we're dealing with
 
var iframeCache = new Object();
 
 
/**
The getCacheTag function just creates a (hopefully) unique identifier for
each <iframe> that we resize.
*/
 
function getCacheTag (iframeElement) {
return iframeElement.src + "~" + iframeElement.offsetLeft + "~" + iframeElement.offsetTop;
}
 
 
/**
We're using this as a class to hold information about the <iframe> elements
that we're manipulating.
*/
 
function cachediframe (iframeElement, increment) {
this.iframe = iframeElement;
this.cacheTag = getCacheTag(iframeElement);
this.originalSrc = iframeElement.src;
 
var h = iframeElement.height;
var w = iframeElement.width;
this.originalHeight = h;
this.originalWidth = w;
 
increment = (!increment) ? resizeIncrement : increment;
this.heightIncrement = Math.ceil(Math.min(1, (h / w)) * increment);
this.widthIncrement = Math.ceil(Math.min(1, (w / h)) * increment);
}
 
 
/**
This is the function that should be called in the onMouseOver and onMouseOut
events of an <iframe> element. For example:
 
<iframe src='onesmaller.gif' onMouseOver='resizeiframe(this, 150, "onebigger.gif")' onMouseOut='resizeiframe(this)'>
 
The only required parameter is the first one (iframeElement), which is a
reference to the <iframe> element itself. If you're calling from onMousexxx, 
you can just use "this" as the value.
 
The second parameter specifies how much larger or smaller we should resize
the iframe to, as a percentage of the original size. In the example above,
we want to resize it to be 150% larger. If this parameter is omitted, we'll
assume you want to resize the iframe to its original size (100%).
 
The third parameter can specify another iframe that should be used as the
iframe is being resized (it's common for "rollover iframes" to be similar but
slightly different or more colorful than the base iframes). If this parameter
is omitted, we'll just resize the existing iframe.
*/
 
function resizeiframe (iframeElement, percentChange, newIframeURL) {
// convert the percentage (like 150) to an percentage value we can use
// for calculations (like 1.5)
var pct = (percentChange) ? percentChange / 100 : 1;
 
// if we've already resized this iframe, it will have a "cacheTag" attribute
// that should uniquely identify it. If the attribute is missing, create a
// cacheTag and add the attribute
var cacheTag = iframeElement.getAttribute("cacheTag");
if (!cacheTag) {
cacheTag = getCacheTag(iframeElement);
iframeElement.setAttribute("cacheTag", cacheTag);
}
 
// look for this iframe in our iframe cache. If it's not there, create it.
// If it is there, update the percentage value.
var cacheVal = iframeCache[cacheTag];
if (!cacheVal) {
iframeCache[cacheTag] = new Array(new cachediframe(iframeElement), pct);
} else {
cacheVal[1] = pct;
}
 
// if we're supposed to be using a rollover iframe, use it
if (newIframeURL)
iframeElement.src = newiframeURL;
 
// start the resizing loop. It will continue to call itself over and over
// until the iframe has been resized to the proper value.
resizeiframeLoop(cacheTag);
return true;
}
 
 
/**
This is the function that actually does all the resizing. It calls itself
repeatedly with setTimeout until the iframe is the right size.
*/
function resizeiframeLoop (cacheTag) {
// get information about the iframe element from the iframe cache
var cacheVal = iframeCache[cacheTag];
if (!cacheVal)
return false;
 
var cachediframeObj = cacheVal[0];
var iframeElement = cachediframeObj.iframe;
var pct = cacheVal[1];
var plusMinus = (pct > 1) ? 1 : -1;
var hinc = plusMinus * cachediframeObj.heightIncrement;
var vinc = plusMinus * cachediframeObj.widthIncrement;
var startHeight = cachediframeObj.originalHeight;
var startWidth = cachediframeObj.originalWidth;
 
var currentHeight = iframeElement.height;
var currentWidth = iframeElement.width;
var endHeight = Math.round(startHeight * pct);
var endWidth = Math.round(startWidth * pct);
 
// if the iframe is already the right size, we can exit
if ( (currentHeight == endHeight) || (currentWidth == endWidth) )
return true;
 
// increase or decrease the height and width, making sure we don't get
// larger or smaller than the final size we're supposed to be
var newHeight = currentHeight + hinc;
var newWidth = currentWidth + vinc;
if (pct > 1) {
if ((newHeight >= endHeight) || (newWidth >= endWidth)) {
newHeight = endHeight;
newWidth = endWidth;
}
} else {
if ((newHeight <= endHeight) || (newWidth <= endWidth)) {
newHeight = endHeight;
newWidth = endWidth;
}
}
 
// set the iframe element to the new height and width
iframeElement.height = newHeight;
iframeElement.width = newWidth;
 
// if we've returned to the original iframe size, we can restore the
// original iframe as well (because we may have been using a rollover
// iframe in the original call to resizeiframe)
if ((newHeight == cachediframeObj.originalHeight) || (newWidth == cachediframeObj.originalwidth)) {
iframeElement.src = cachediframeObj.originalSrc;
}
 
// shrink or grow again in a few milliseconds
setTimeout("resizeiframeLoop('" + cacheTag + "')", resizeDelay);
}
 
</script>
 

and in the iframe tag:

 onmouseover="resizeIframe(this, 350)" onmouseout="resizeIframe(this)"

I've also tried:

 onmouseover='resizeIframe(this, 350, "player.htm")' onmouseout='resizeIframe(this)'

and neither works.

[acoder]

resizeIframe should be "resizeifra me" (lower-case i).