Switching the background-image according to resolution

Hi, everyone,


I have a special problem:

For every monitor resolution in 200 pixel steps from 800 to 1600
pixels I have an image to be shown as centered background-image.
Those images all have the same name and reside in the following
physical path structure:

/images/700/many_files_in_this_dir.png
/images/900/many_files_in_this_dir.png
/images/1100/many_files_in_this_dir.png
/images/1300/many_files_in_this_dir.png
/images/1500/many_files_in_this_dir.png

The basic idea is to selectively display the appropriate *.png file
for every *.html file to be opened on the website according to the
user's individual monitor resolution.

Now, I could do this job easily in PHP oder Perl, but the customer
wants to have it in JavaScript.

Some code snippet I have already tried to set up and show the basic
idea:

var file_to_be_displayed = something???;

if ((screen.width == 800) || (screen.width > 800) && (screen.width <=
1600) || (screen.width > 1600)) {
document.write('<td width="210" weight="*%" bgcolor="#6C799B"
bordercolor="white" style="border-bottom-width:1px;
border-bottom-style:solid;">&nbsp;</td>');
document.write('<td width="*" height="*%" bgcolor="#C2C7D3"
bordercolor="white" style="border-width:1px; border-style:solid;">');
if (screen.width == 800) {
document.write('<div style="width:*%; height:100%; overflow:auto;
background-image:url(images/700/appropriate_filename_for_this_resolution.png);
background-repeat:no-repeat; background-position: 50% 50%; align:left;
text-align:justify">');
}
if ((screen.width > 800) && (screen.width <= 1000)) {
document.write('<div style="width:*%; height:100%; overflow:auto;
background-image:url(images/900/appropriate_filename_for_this_resolution.png);
background-repeat:no-repeat; background-position: 50% 50%; align:left;
text-align:justify">');
}
if ((screen.width > 1000) && (screen.width <= 1200)) {
document.write('<div style="width:*%; height:100%; overflow:auto;
background-image:url(images/1100/appropriate_filename_for_this_resolution.png);
background-repeat:no-repeat; background-position: 50% 50%; align:left;
text-align:justify">');
}
if ((screen.width > 1200) && (screen.width <= 1400)) {
document.write('<div style="width:*%; height:100%; overflow:auto;
background-image:url(images/1300/appropriate_filename_for_this_resolution.png);
background-repeat:no-repeat; background-position: 50% 50%; align:left;
text-align:justify">');
}
if ((screen.width > 1400) && (screen.width <= 1600)) {
document.write('<div style="width:*%; height:100%; overflow:auto;
background-image:url(images/1500/appropriate_filename_for_this_resolution.png);
background-repeat:no-repeat; background-position: 50% 50%; align:left;
text-align:justify">');
}
if (screen.width > 1600) {
document.write('<div style="width:*%; height:100%; overflow:auto;
background-image:url(images/1500/appropriate_filename_for_this_resolution.png);
background-repeat:no-repeat; background-position: 50% 50%; align:left;
text-align:justify">');
}
}

Now, the *.html file should call the javascript and provide it with
the appropriate filename to be shown in the respective resolution.

Maybe this is a stupid question and the approch might be quite simple,
but at the very moment I'm unable to think of a good solution.

Can anyone please help?


Sincerely



Markus Mohr

re: Switching the background-image according to resolution

Markus Mohr <markus.mohr@mazimoi.de> writes:
[color=blue]
> For every monitor resolution in 200 pixel steps from 800 to 1600
> pixels I have an image to be shown as centered background-image.
> Those images all have the same name and reside in the following
> physical path structure:
>
> /images/700/many_files_in_this_dir.png
> /images/900/many_files_in_this_dir.png
> /images/1100/many_files_in_this_dir.png
> /images/1300/many_files_in_this_dir.png
> /images/1500/many_files_in_this_dir.png
>
> The basic idea is to selectively display the appropriate *.png file
> for every *.html file to be opened on the website according to the
> user's individual monitor resolution.[/color]

Why use monitor resolution if the browser isn't maximized?

If you insist on relying on resolution, at least use screen.availWidth
instead of screen.width.
[color=blue]
> Now, I could do this job easily in PHP oder Perl, but the customer
> wants to have it in JavaScript.[/color]

That would require your server to know my screen resoltution, which
would require Javascript.
[color=blue]
>
> Some code snippet I have already tried to set up and show the basic
> idea:[/color]


That's a lot of code for such a small thing.

var baseName="many_files_in_this_dir.png";
var fileSize;
if (screen.availWidth <= 800) {
fileSize = "700";
} else if (screen.availWidth <= 1000) {
fileSize = "900";
} else if (screen.availWidth <= 1200) {
fileSize = "1100";
} else if (screen.availWidth <= 1400) {
fileSize = "1300";
} else { // > 1400
fileSize = "1500";
}
var fullFileName = "images/"+fileSize+"/"+baseName;
[color=blue]
> document.write('<td width="*" height="*%" bgcolor="#C2C7D3"
> bordercolor="white" style="border-width:1px; border-style:solid;">');[/color]

"*%" is not a valid value for the height attribute. Nor is "*" for the
width.
[color=blue]
> if (screen.width == 800) {
> document.write('<div style="width:*%; height:100%; overflow:auto;[/color]

"*%" isn't valid as a CSS length either.

document.write('<div style="height:100%; overflow:auto;'+
'background: url('+fillFileName+') 50% 50% no-repeat;'+
'text-align:justify;">');

There is no CSS property called "align".
[color=blue]
> Now, the *.html file should call the javascript and provide it with
> the appropriate filename to be shown in the respective resolution.[/color]

See above.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

re: Switching the background-image according to resolution

On 29 Oct 2003 01:34:46 +0100, Lasse Reichstein Nielsen
<lrn@hotpop.com> wrote:
[color=blue]
>Markus Mohr <markus.mohr@mazimoi.de> writes:
>
> [....]
>
>That's a lot of code for such a small thing.
>
> var baseName="many_files_in_this_dir.png";
> var fileSize;
> if (screen.availWidth <= 800) {
> fileSize = "700";
> } else if (screen.availWidth <= 1000) {
> fileSize = "900";
> } else if (screen.availWidth <= 1200) {
> fileSize = "1100";
> } else if (screen.availWidth <= 1400) {
> fileSize = "1300";
> } else { // > 1400
> fileSize = "1500";
> }
> var fullFileName = "images/"+fileSize+"/"+baseName;[/color]

Thank you very much, that really does the job very well.

Sincerely


Markus Mohr