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.
