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:
Expand|Select|Wrap|Line Numbers
- <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:
Expand|Select|Wrap|Line Numbers
- onmouseover="resizeIframe(this, 350)" onmouseout="resizeIframe(this)"
Expand|Select|Wrap|Line Numbers
- onmouseover='resizeIframe(this, 350, "player.htm")' onmouseout='resizeIframe(this)'