Switching the background-image according to resolution

[Markus Mohr]

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

 

[Lasse Reichstein Nielsen]

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.

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.

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

That would require your server to know my screen resoltution, which
would require Javascript.

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

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;

document.write('<td width="*" height="*%" bgcolor="#C2C7D3"
bordercolor="white" style="border-width:1px; border-style:solid;">');

"*%" is not a valid value for the height attribute. Nor is "*" for the
width.

if (screen.width == 800) {
document.write('<div style="width:*%; height:100%; overflow:auto;

"*%" 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".

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

See above.

/L

 

[Markus Mohr]

[....]

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;

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

Sincerely


Markus Mohr