Dynamically Resizing Images | 2

[previous]

Dynamically Resizing Images

We begin with a standard browser sniffer function Is() and a little function winResize() to handle the resizing of images. The real magic however, is contained within the body section.

The first thing to do is to create a CSS layer as demonstrated below:

<div id="backgroundLayer" style="position:absolute; width:200px;
height:115px; z-index:1; left: 0px; top: 0; visibility: visible">

Then we need to think about the logic of what's involved in getting an image to resize dynamically according to a browser's dimensions. One of the immediate things needed to be paid attention to is to capture a user's browser dimensions. In order to achieve this a script is created within the CSS layer as such:

if(is.ns4 || is.ns6) {
available_width = innerWidth;
available_height = innerHeight;
}
else if(is.ie4 || is.ie5 || is.ie55 || is.ie6) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
}

We create two variables named available_width and available_height respectively. Here is where the earlier browser sniffer comes into play. We create a condition for the Netscape version browsers and then assign the variables available_width and available_height to be associated with innerWidth and innerHeight respectively. innerWidth and innerHeight are Netscape proprietary methods.

For Internet Explorer, the variables available_width and available_height are assigned to document.body.clientWidth; and document.body.clientHeight; respectively. document.body.clientWidth; and document.body.clientHeight; are Internet Explorer proprietary methods.

The next part of the script is used to first detect all the browsers capable of using this dynamic resizing method by using the following conditional statement:

if(is.ie4 || is.ie5 || is.ie55 || is.ie6 || is.ns6 || is.ns4) {

Then, two more variables image1_width and image1_height are created to handle the image resizing based on browser dimensions:

image1_width = (available_width * 1.00);
image1_height = (available_height * 1.00);

Remember the earlier variables available_width and available_height? Here is where they come into play in this equation. The variable image1_width points to the variable available_width, which contains the browser's width dimension information.

By using a little math we can then make the image fit to a browser's width dimensions, hence the use of * 1.00 . All that is happening here is that we are simply telling the browser to scale the image proportionally to the browser's width. Proportionally 1.00 is equivocal to 100%. If we wanted to scale the image to half of the browser width then we would use image1_width = (available_width * 0.50); . The exact same method is used to make the image resize according to a browsers height.

The next stage is to write in the image itself. To accomplish this, another variable is created var image1. To make the image dynamically resize we use the earlier captured information about the browsers dimensions and the information pertaining to what dimensions we want the image to scale to. Hence, we assign the attributes width and height with that information as demonstrated below:

var image1 = '<img src="nirvana.jpg" width="' + image1_width
    + '"  height="' + image1_height + '">';

The final thing left to do is to dynamically write in the image by using document.write and then just close of the script and div tag as demonstrated below.

document.write(image1);
}
</script>
</div>

The above allows for an image to scale accordingly to browser dimensions. But what if you need more than one image or want to have text over the image? Because the image is actually being written into the document via JavaScript and because it's in a layer, you cannot simply add images or text into the body of the document. So what is the use of this technique you may ask?

The solution is quite simple. All that needs to occur is that text or other elements be put into a layer with a higher z-index than the image that is being dynamically resized. For example if the background image is one of the images being dynamically resized, and the CSS Layer it is contained in has a z-index of one, then in order to have text appear, the text is inserted into another CSS Layer with a z-index of 2.

Another important thing to remember is that you are not limited to just having the one image dynamically resized. All images on the page can be resized with this method. All that's needed here is to change the variable image1 to image2 or whatever name makes most conceptual sense to you.

Additionally, thinking in terms of only images is restrictive, for example, we can scale a flash movie contained within a layer with the very same techniques as demonstrated below:

<div id="controlLayer" style="position:absolute;  width:82px;
height:85px; z-index:4; left: 20px; top: 6px; visibility: visible">
    <script langauge="javascript">
   if(is.ns6||is.ns4) {
        pageWidth=innerWidth;
        pageHeight=innerHeight;
    } else if(is.ie55||is.ie5||is.ie6 || is.ie4) {
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
    if(is.ie4 || is.ie55 ||is.ie5 || is.ns6 ||is.ie6 || is.ns4)  {
flash1_width = (pageWidth*.02);
flash1_height = (pageHeight*.03);
var flash1 = '<object  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swfla
     sh.cab#version=4,0,2,0" width="' + flash1_width + '" height="' +
flash1_height + '" id="music" name="music">'
   flash1 += '<param name="movie"  value="musiccontrol.swf">'
    flash1 += '<param name="quality" value="high">'
flash1 += '<param name="scale" value="exactfit">'
flash1 += '<embed src="musiccontrol.swf" quality="high"
pluginspage="https://www.macromedia.com/shockwave/download/index.cgi?P1_
Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"  width="'
+ flash1_width + '" height="' + flash1_height + '" id="music"  name="music"
scale="exactfit">'
    flash1 += '</embed>'
flash1 += '</object>'
document.write(flash1);
}
</script>
</div>

At the outset I mentioned dynamic font scaling and layer resizing as part of the whole fluid solution. With a bit of luck, I will have the opportunity to write about these techniques at a later point. For those of you willing to plunge into my source code, you can view complete working examples at https://dhtmlnirvana.com/ or the One Project site (IE5+ or NS6) once you are there. The dynamic font scaling and layer resizing techniques are contained within the source code.

In the meantime, I hope you find this article on dynamic image resizing of value to you and your Web development efforts.

Born in Italy, currently residing in Australia and about to shift to Canada, Eddie Traversa is a freelance Web developer with an eye on building Web sites that use the latest Web technologies. His award winning site https://dhtmlnirvana.com/ focuses on an open Web learning environment and in so doing endeavours to help Web developers build their skills in areas such as D-HTML, D- XHTML, Flash and graphics creation. He can be reached at: mailto:[email protected].

[previous]