Random BG Images + Screen Resolution aware [Archive]

Click to See Complete Forum and Search --> : Random BG Images + Screen Resolution aware

websta

07-29-2005, 07:55 PM

Greetings,

I'm developing a site that has several cool, high-resolution background images, and I would love to have a random background image function on the site...

However, each background image includes the logo in the background. Thus, screen resolution is a big issue. A splash page with different entries for various resolutions doesn't seem to be a viable option.

With the logos in the backgrounds, the images cannot be stretched to fit the browser window in terms of width *and* height, because then the logo gets distorted. And, the logo needs to be positioned "just so" on the background image, so it can't just be overlaid on top of the background. It has to be part of the background.

I have found cut & paste code for random background images, and for differing backgrounds based upon screen resolution. But not both, in the same script.

Question: So, does anyone have a URL to a script that allows for random background images, which takes into account the users' screen resolution??

Or does anyone have any thoughts of another approach...?

Help me, Techi-Wan Kenobis! You're my only hope!

Mr J

07-30-2005, 06:56 AM

The following example determines if the resolution is 1024 or 800

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

</script>
</HEAD>
<BODY onload="chk_res()">

</BODY>
</HTML>

websta

07-30-2005, 11:18 AM

Thanks for the code, Mr. J.

So I have three sets of code -- one for the random images, and one that's resolution aware, putting up a background of a certain size.

:confused: How do I combine them? :confused: Is there a way to get them to work together, so a random image is selected from a certain set (or folder), based upon screen resolution?:

Random images script:

today=new Date();
jran=today.getTime();
var number = 6;
var random_number="11";
var image="";
var text_color="";
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;
random_number = Math.ceil( (jran/(im*1.0)) *number);
// Loads the appropriate image and text color based on random number.
if (random_number==1) {
text_color="000000";
image="background-corner--sized-logo-!.jpg";
}
if (random_number==2) {
text_color="000000";
image="background-white-lines--sized-logo-!.jpg";
}
if (random_number==3) {
text_color="000000";
image="background-arrow--base-sized-logo-!.jpg";
}
if (random_number==4) {
text_color="000000";
image="background-just-cracks--sized--logo-at-80-trans-!.jpg";
}
if (random_number==5) {
text_color="000000";
image="background--cory-one-little-sprocket--sized--logo-!.jpg";
}
if (random_number==6) {
text_color="000000";
image="background--cory-two-sprockets--sized--logo-!.jpg";
}
</SCRIPT>

Different resolution script:

<SCRIPT LANGUAGE="JavaScript">


</script>

Mr J

07-30-2005, 12:57 PM

As per my last reply.

Each array index would contain a set of images for the relative resolution.depending on how many images you are having for the random selection just add more indexes to suit.

The following example will select an image at random from a selection of 3 for the appropriate resolution.

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

</script>
</HEAD>
<BODY onload="chk_res()">

</BODY>
</HTML>

websta

07-30-2005, 01:23 PM

Mr. J, thanks very much for the explanation! I appreciate it very much!

However, there seems to be some problem in that it's only serving up a single background image for each screen resolution -- a different one, in sequence.

I added six images to each array, and increased the number of arrays for the total number of screen resolutions, five, for screen widths of 800 through 1600.

So, for 800x600 it selects the first image in the array. At the next resolution, with a 1024, it selects the second in the array. With the third resolution, it selects the third image in the array, and so on.

Page refreshes/reloads just return the same background image.

Any ideas on how to make it work??

websta

07-31-2005, 04:27 PM

[bump] Anyone? Anyone?

websta

08-01-2005, 12:21 AM

This is what I have now -- but it isn't randomizing images --what's wrong?

<html>
<head>
<title>SPROCKET SPECIALISTS</title>



<script type="text/javascript">

</script>
<style type="text/css">
a.header:link {color: #ffffff; text-decoration: none;}
a.header:active {color: #DE353C; text-decoration: none;}
a.header:visited {color: #ffffff; text-decoration: none;}
a.header:hover {color: #ffff00; text-decoration: none;}

a.footer:link {color: #ffffff; }
a.footer:active {color: #DE353C; }
a.footer:visited {color: #ffffff; }
a.footer:hover {color: #ffff00; }

/* Transparent text area */
#transbox { width:285px; height:150px;
margin-left:10px;
margin-top:0px;
background:#FFFFFF;
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
-khtml-opacity:0.80;
border: 1px double black;
}

/* Asterick represents wildcard for child dependents of #transbox */
#transbox * {position: relative}

/* Text div - lacks transparency */
#transbox div {padding:15px;
color: #000;}

</style>

</HEAD>
<body onload="chk_res()" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" style="background-repeat:no-repeat" bgcolor="#404040">

Mr J

08-01-2005, 08:00 AM

It looks like you have not set out the arrays correctly, try it this way

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">

</script>

</HEAD>
<BODY onload="chk_res()">

</BODY>
</HTML>

websta

08-02-2005, 04:07 AM

I have a temp page up with Mr. J's suggestions -- and it seems to be working, but intermittently... See http://cs17.simplehost.com/~sprocket/index.html

Matching the images with screen resolution seems to be working well(!!).

However, at whatever resolution, sometimes the images seem do not appear, presenting dark grey bgcolor instead...

Is this due to downloading the images? These temp images are highly compressed, yet still fairly large. Leaving the window open doesn't eventually present the background image however.

Note that I've reduced total number of background images compared with the above.

Any ideas? Help!

<HTML>
<HEAD>
<title>SPROCKET SPECIALISTS</title>



<script type="text/javascript">

</script>
</HEAD>
<body onload="chk_res()" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" style="background-repeat:no-repeat" bgcolor="#404040">

</body>
</html>

Mr J

08-02-2005, 08:05 AM

I am running a resolution of 1024 and have taken a look at your page.

The following 3 images downloaded and showed ok

1024--2background-white-lines--base--logo--!.jpg
1024--2background-arrow--base--logo--!.jpg
1024--2background-just-cracks--base--logo--!.jpg

This image did not download

1024--2background-corner--base--logo-!.jpg

I could not access it directly either, make sure that you have the image name correct.

websta

08-02-2005, 01:46 PM

Thanks for pointing that out Mr. J. Silly mistake. I have the naming errors corrected, but the backgrounds still seem intermittent.

Mr J

08-02-2005, 03:06 PM

What resolution are you testing?

I've been back to that page and checked again I refreshed the page 50 times and each time a background was shown.

What do you mean by intermittent, is one not showing?

websta

08-02-2005, 08:49 PM

There was a typo in a 1280 listing, which is the resolution I was using :rolleyes: and there may (or not) be a glitch in Netscape (my trusty browser) where if the background isn't downloaded by the time the other page elements are, then it just gives up. However, in IE, it seems to be working like a charm. :)

Thanks very much, Mr. J, for all your help. I sincerely appreciate it!

BTW, Great web site (http://www.huntingground.freeserve.co.uk/main/mainfram.htm) -- I will be definitely continue to visit your large archive of javascript, CSS, and other bits of helpful codes in the future!!! Very straightforward, easy to use, and *lots of great free code!* Thank you! :cool: