Scaling Images
FreAk
Javascript or another scripting language? I need it to scale the
images based on screen resolution.
David Challender
Within the IMG tag, use the likes of HEIGHT etc. to specify size of the
image.
FreAk
I'm trying to avoid hard-coding the image sizes like that. I know
there's a javascript that detects monitor resolution, and I thought
maybe I could use document.write.* or something, but I wasn't sure
exactly how. I was just hoping to make the images more dynamic. Maybe
CCS would work somehow?
Robert Tweed
completely cross-browser compatible using DHTML. Sorry :-(
This works in IE:
<html>
<head><title>IMAGE SCALING TEST</title></head>
<body
onLoad="setTimeout('document.images.test.width=200;document.images.test.heig
ht=200;',500);">
<img name="test" src="test.gif" width="100" height="100">
</body>
</html>
If you are using an old version of IE or NN, then you will have to put the
images in a layer (or div) and re-write the actual HTML (including the width
and height attributes of the images) at runtime. This sort of thing is very
flaky in Netscape.
- Robert
David Challender <da...@challender.org.uk> wrote in message
news:3B5BF047...@challender.org.uk...
David Challender
> David Challender <da...@challender.org.uk> wrote in message news:<3B5BF047...@challender.org.uk>...
>
>
>>>
>>Within the IMG tag, use the likes of HEIGHT etc. to specify size of the
>>image.
>>
>
> I'm trying to avoid hard-coding the image sizes like that. I know
> there's a javascript that detects monitor resolution, and I thought
> maybe I could use document.write.* or something, but I wasn't sure
> exactly how. I was just hoping to make the images more dynamic. Maybe
> CCS would work somehow?
>
I was not implying hard coding - I was assuming this was done
dynamically, e.g. callling a script to generate image html, this script
would, if resolution not already stored, store resolution, calculate
sizing factor, then produce the HTML you need with the relevant size.
David Challender
>
>
> I was not implying hard coding - I was assuming this was done
> dynamically, e.g. callling a script to generate image html, this script
> would, if resolution not already stored, store resolution, calculate
> sizing factor, then produce the HTML you need with the relevant size.
Follow up to this - see code snippet.
This snippet is demo only, not for production i.e. viable for certain
browsers only as uses screen object, however trivial to alter so
defaults are used otherwise.
2 simple functions
1. Gets screen size & derives a scaling factor, in this case screen height/4
2. This is passed url of image.
If scaling factor not yet exist this calls 1 to get it.
Then produces img HTML with height set to scaling factor.
Returns the string of html.
This can be used by html page to dynamically size images.
Example below (can be cut & pasted - valid html) shows html page using these scripts.
HTML shows image "myfile.jpg" twice.
Once with straight, non sized img link.
Secondly, created with document.write using the scripts above.
To test have a jpg file called "myfile.jpg" (or edit the filename).
As ever, only of use to those browsers that support javascript...
<html>
<script language="JavaScript">
<!--
width=0;
height = 0;
scaler = 0;
function getScreenDetails()
{
width = screen.width;
height = screen.height;
if(width <=0)
{
width = 480;
}
if(height < 0)
{
height = 640;
}
scaler = height / 4;
}
function imgLinker(url)
{
if(scaler <= 0)
{
getScreenDetails();
}
linkline = "<img alt='my image' src='" + url + "' height=" + scaler +
">";
return linkline;
}
//-->
</script>
<head>
<title>
Test
</title>
</head>
<body>
<img alt="test" src="myfile.jpg">
<p>
</p>
<script language="JavaScript"><!--
document.write(imgLinker("myfile.jpg"));
// --></script>
</body>
</html>