Dynamically Resizing Images
  [next] |
Dynamically Resizing Images By ( Eddie Traversa )
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>|
[next] |
Created: April 13, 2001
Revised: April 13, 2001
Find a programming school near you