| home / experts / dhtml / diner / bgresize |   
|
This is a DHTML cross-browser technique. The in-page examples will only work in Navigator 4 and Explorer 4, all platforms.
|
 |
Background Image Resize (2)The ScriptWe start our script with our usual browser variables. <SCRIPT LANGUAGE="JavaScript1.2"> <!-- NS4 = (document.layers); IE4 = (document.all); scaleWidth = true; scaleHeight = true; imSRC = "skiff.jpg"; Three more variables are created that you must set according to your preferences. scaleWidth and scaleHeight take a Boolean value, depending on whether you want the image to be scaled only to fit the width of the window, only the height, or both. If only one of the variables is set to true, then the image retains its proportions. If both are true, the image is stretched in both directions, and distorted. imSRC, naturally, should contain the background image file. Navigator ReloadFor Navigator, we simply use our standard resize-reload code. For a discussion, see Ensuring DHTML Layout on Resize in the DHTML Diner. if (NS4) window.onload = setResize;
function setResize(){
setTimeout("window.onresize=reDo;",500);
}
function reDo(){
window.location.reload()
}
Explorer ResizeFor Explorer, we set the onresize handler of the window to call the reDoIE() function whenever the user resizes the window. if (IE4) window.onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;
}
The reDoIE() function sets the image's width and height to correspond to the window's inner dimensions. The image is given a NAME of imBG when originally created. Element CreationOur final function, makeIm(), creates the HTML for the positioned element and the image. First, we store the window's inner dimensions to winWid and winHgt. Then, we generate a string (imStr) that contains the relevant HTML for our element. The WIDTH= and HEIGHT= attributes for the image are included only if the relevant variables, scaleWidth and scaleHeight, are true. Specifying only one of the two attributes cause the image to be rendered in its true proportions. function makeIm() {
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = "<DIV ID=elBGim"
+ " STYLE='position:absolute;left:0;top:0;z-index:-1'>"
+ "<IMG NAME='imBG' BORDER=0 SRC=" + imSRC;
if (scaleWidth) imStr += " WIDTH=" + winWid;
if (scaleHeight) imStr += " HEIGHT=" + winHgt;
imStr += "></DIV>";
document.write(imStr);
}
//-->
</SCRIPT>
Finally, the string is written to the page with document.write(). For example, if the window's dimensions are 540x320, and we want to scale in both directions, the HTML contained in imStr would be: <DIV ID=elBGim
STYLE='position:absolute;left:0;top:0;z-index:-1'>
<IMG NAME='imBG' BORDER=0 SRC=skiff.jpg
WIDTH=540 HEIGHT=320>
</DIV>
The page BODYThe BODY tag needs the Navigator default margins overruled by setting MARGINWIDTH and MARGINHEIGHT to 0. Immediately following BODY, we create our element by calling makeIm(). <BODY MARGINHEIGHT=0 MARGINWIDTH=0> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- makeIm(); //--> </SCRIPT> The next page contains the unbroken complete code. |
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: May 07, 1998
Revised: May 07, 1998
URL: http://www.webreference.com/dhtml/diner/bgresize/bgresize2.html
