Dynamically Resizing Images

One of the biggest criticisms facing Dynamic HTML(DHMTL) in relation to Flash is DHTML's seeming inability to scale pages relative to a browser's dimensions. To overcome this problem, three central areas need to be focused upon:

Dynamic Font Scaling.
Layer Resizing.
Element Resizing

Each of these key areas need to accommodate differing browser dimensions, while at the same time maintaining the same layout and feel of the page. It's no easy task, but it is possible with the help of a little JavaScript magic.

In this article we are going to investigate how to dynamically resize an image. But before we do, lets understand some of the previous techniques used in an attempt to try and accommodate differing browser dimensions.

Developers typically went one of four ways.

Conditionally passing different size images based on screen resolution.
Opening a new fixed sized window.
Asking the user to switch screen resolutions.
Not bothering at all.

Each of these methods has its drawbacks, for example, many users object to a new fixed size window being opened. Developers typically hate making four or five different size versions of the same image and then finding that if a user was not in a certain screen resolution that the fluid nature of their pages quickly fell apart. I know personally I am not amenable to switching screen resolutions just to see someone's page and I am sure many are like-minded. Finally not caring at all really must shed a poor light on the "developer" that takes this route.

Recently, I discovered a method that allows for the dynamic resizing of images as well as other page elements that doesn't rely on passing multiple images. In all honesty even this method has its drawbacks. For one thing it requires, extra coding to make pages fluid. Another drawback is that to actually see the best results with this method, a higher than typical image resolution is needed. For example, if using a background, rather than making the background 800*600, something akin to 1152 * 864 is needed. The golden rule here is to scale down not up, as scaling up results in poor image quality. The obvious disadvantage is that this method leads to increased kbs.

However, if care is taken in image construction with particular emphasis on image compression while maintaining a reasonable image quality, then it is quite a feasible and viable method to use. Additionally, it saves the developer time, because only one image has to be made rather than many versions of the same image. On top of this developers have an image that scales appropriately to different browser dimensions. While the following method is by no means perfect, I am still working on perfecting it; I do have a strong belief that it's a definite positive step in the right direction.

Lets begin this sojourn by first looking at the completed script:

<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

function Is() {
agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf('spoofer')
== -1)
     && (agent.indexOf('compatible') ==  -1)));
this.ns2 = (this.ns && (this.major == 3));
this.ns3 = (this.ns && (this.major == 3));
this.ns4b = (this.ns && (this.major == 4) && (this.minor <= 4.03));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0")
 == -1));
this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0")
 != -1));
this.ie55 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.5")
 != -1));
this.ie6 = (this.ie && (agent.indexOf("msie 6.0")!=-1) );
this.aol = (agent.indexOf("aol") != -1);
this.aol3 = (this.aol && this.ie3);
this.aol4 = (this.aol && this.ie4);
this.aol5 = (this.aol && this.ie5);
}
var is = new Is();

function winResize() {
if(is.ns4 ||is.ns6||is.ie4||is.ie5||is.ie55||is.ie6) {
history.go(0);
}
}
// -->
</script>
</HEAD>

<body onResize="winResize()">

<div id="backgroundLayer" style="position:absolute; width:200px;
height:115px; z-index:1; left: 0px; top: 0; visibility: visible">
<SCRIPT LANGUAGE="JavaScript">
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;
}
if(is.ie4 || is.ie5 || is.ie55 || is.ie6 || is.ns6 || is.ns4) {
image1_width = (available_width * 1.00);
image1_height = (available_height * 1.00);
var image1 = '<img src="nirvana.jpg" width="' + image1_width
    + '"  height="' + image1_height + '">';

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

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions

Whitepapers and eBooks
Microsoft Article: HyperV-The Killer Feature in WinServer �08 Avaya Article: How to Feed Data into the Avaya Event Processor Microsoft Article: Install What You Need with Win Server �08 HP eBook: Putting the Green into IT Whitepaper: HP Integrated Citrix XenServer for HP ProLiant Servers Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 1 Intel Go Parallel Portal: Interview with C++ Guru Herb Sutter, Part 2--The Future of Concurrency		Avaya Article: Setting Up a SIP A/S Development Environment IBM Article: How Cool Is Your Data Center? Microsoft Article: Managing Virtual Machines with Microsoft System Center HP eBook: Storage Networking , Part 1 Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts
Intel Video: Are Multi-core Processors Here to Stay? On-Demand Webcast: Five Virtualization Trends to Watch HP Video: Page Cost Calculator Intel Video: APIs for Parallel Programming		HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2 MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits
Sun Download: Solaris 8 Migration Assistant Sybase Download: SQL Anywhere Developer Edition Red Gate Download: SQL Backup Pro and free DBA Best Practices eBook		Red Gate Download: SQL Compare Pro 6 Iron Speed Designer Application Generator MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos
How-to-Article: Preparing for Hyper-Threading Technology and Dual Core Technology eTouch PDF: Conquering the Tyranny of E-Mail and Word Processors IBM Article: Collaborating in the High-Performance Workplace HP Demo: StorageWorks EVA4400		Intel Featured Algorhythm: Intel Threading Building Blocks--The Pipeline Class Microsoft How-to Article: Get Going with Silverlight and Windows Live MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com

Browse >

Software Engineering for Ajax · Perl Pragma Primer · Implement Drag and Drop in Your Web Apps: Part 2

Sitemap · Experts · Tools · Services · Email a Colleague · Contact

FREE Newsletters >

The latest from internet.com

Policy-based Management in SQL Server 2008 – Part II · For Starters: Virtualization - Part 1 · USPS Rate-Change Tips for E-tailers

Created: April 13, 2001
Revised: April 13, 2001

URL: http://webreference.com/programming/javascript/images/