X-Cart forums - Sizing Pictures to reflect Monitor Resolutions.

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Sizing Pictures to reflect Monitor Resolutions. (https://forum.x-cart.com/showthread.php?t=21570)

Sizing Pictures to reflect Monitor Resolutions.

I was told not to write HELP in the Subject Area. So here goes HELP!
I am using Flexy Rectangles which has a photo (main_bg_1.jpg 1000 x 132). If my monitor setting is 1024 x 768 then I see only 70% (approx) of photo. If the setting is 800 x 600 then I see even less and with 1280 x 1024 then I see everything. I need a simple solution that will accomodate a customer regardless of his/her monitor setting. I suspect the solution may require that I create 3 images (which is fine) but I need to know the IF/ELSE logic that will recognize the monitor setting.

If anyone can help I would be most appreciative.

Try following:

1. Head:

Code:

<script type="text/javascript">

//<![CDATA[



{literal}

var w=screen.width;

var h=screen.height;



function resolution() {

if((w==800)&&(h==600)) {

document.getElementById('point').src='skin1/images/800_600_bg.jpg';

}

else if((w==1024)&&(h==768)) {

document.getElementById('point').src='skin1/images/1024_768_bg.jpg';

}

else if((w==1152)&&(h==864)) {

document.getElementById('point').src='skin1/images/1152_864_bg.jpg';

}

else if((w==1280)&&(h==960)) {

document.getElementById('point').src='skin1/images/1280_960_bg.jpg';

}

else if((w==1280)&&(h==1024)) {

document.getElementById('point').src='skin1/images/1280_1024_bg.jpg';

}

}

onload=resolution;

{/literal}



//]]>

</script>

2. Body:

Code:

<div>[img]skin1/images/main_bg.jpg[/img]</div>

Sizing Pictures to reflect Monitor Resolutions.

Many Thanks to Zaja for supplying this code that worked for me in the Home.tpl of the Flexy Rectangles template re the picture main_bg_1.jpg. The idea was to display a diferent version (size) of the same picture depending upon the resolution of the viewing monitor.

2. header code:
Code:
<script type="text/javascript">
//<![CDATA[
{literal}

var w=screen.width;
var h=screen.height;

function resolution() {
if((w==800)&&(h==600)) {
document.getElementById('point').background='skin1 /images/custom/800_600_bg.jpg';
}
else if((w==1024)&&(h==768)) {
document.getElementById('point').background='skin1 /images/custom/1024_768_bg.jpg';
}
else if((w==1152)&&(h==864)) {
document.getElementById('point').background='skin1 /images/custom/1152_864_bg.jpg';
}
else if((w==1280)&&(h==960)) {
document.getElementById('point').background='skin1 /images/custom/1280_960_bg.jpg';
}
else if((w==1280)&&(h==1024)) {
document.getElementById('point').background='skin1 /images/custom/1280_1024_bg.jpg';
}
}
onload=resolution;

{/literal}
//]]>
</script>

3. Table code:
Code:
<table id="point" width="100%" border="0" cellpadding="0" cellspacing="0" background="skin1/images/default_bg.jpg" class="MainImageBackground">