Background image "changes" upon click to next webpage

Hello

I have am working on an old site that has a background image that, via javascript, changes when someone goes to another page on the site. I think the javascript snippet been around for awhile, and is probably pretty bullet proof.  It's in the header of every  webpage.

However, I am thinking can there be some improvement?  For example I would jquery be "better" than javascript?  I don't know much, if anything, about javascript and jquery, but it seems that "Jquery" seems pretty popular these days.

But more importantly I don't want the images to tile.  I want each image to stretch to the width and height of the browser window.  No repeats.  

Here is the script that currently have on the site.  Any suggestions to get it to just stretch height and width of the image?  No tiling?

I see two scripts.  The first one I think has nothing to do with the image changing script, but I am not sure, so I am including it.  

<script type="text/javascript"><!--//--><![CDATA[//><!--
  sfHover = function() {
     var sfEls = document.getElementById("mainlevelmainnav").getElementsByTagName("LI");
     for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
           this.className+="sfhover";
        }
        sfEls[i].onmouseout=function() {
           this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
     }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>

Open in new window


After the above script, in the page header, is the following script, which I think it the actual script and perhaps does not need the above script for it to work.  But I am ignorant about javascript -- and may be wrong :)

<script language="JavaScript">

var randnum = Math.random();
var inum = 6;
// Change this number to the number of images you are using.
var rand1 = Math.round(randnum * (inum-1)) + 1;
classes = new Array;
classes[1] = "bg0";
classes[2] = "bg1";
classes[3] = "bg2";
classes[4] = "bg3";
classes[5] = "bg4";
classes[6] = "bg5";


// Ensure you have an array item for every image you are using.
var classy= classes[rand1];

function setBackground() {
  if (document.body) {

    document.body.className = classy;
  }
}
</script>

Open in new window


Thanks!

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
you've a huge amount of plugin doing this task, what do you think about using one?
for example supersized : http://buildinternet.com/project/supersized/demo.html
Demo (random background) :
http://buildinternet.com/project/supersized/core/3.2/random.html

Google for : << jquery plugin fullscreen image >>
0
 
Rowby GorenAuthor Commented:
HI leakim971,

Supersized looks good. I downloaded the files and checked the documentation and will try it in the morning

--- and report back!

Thanks for helping on this!

Rowy
0
 
Rowby GorenAuthor Commented:
Hi leakim971,

Did a test this morning with supersized, and it looks great.

I'll be working on the site today and let me just make sure there are no unexpected conflicts.

I'll report back later today and expect to award you the points.

Thanks!

Rowby
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
Sar1973Commented:
Your script simply slects randomly one image between the six available. Are you looking for another criteria to load and change the images?
0
 
Rowby GorenAuthor Commented:
Hi  Sar1973P

Basically I want one background image to load, and not change until a page refresh -- or more specifically when someone goes to the next "page".

However I am 99 percent sure that Supersized,, recommended by leakim971 will work for me.  I have it installed, and am just making sure it doesn't have any conflicts with my other elements on the site.

Rowby
0
 
Rowby GorenAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for rowby's comment #a39772852

for the following reason:

Supersize worked perfectly  Thanks so much.
0
 
Rowby GorenAuthor Commented:
Ooops. I selected me for the points.

Moderator please undo the points and I will fix it.
0
 
leakim971PluritechnicianCommented:
Moderator please undo the points and I will fix it.
0
 
leakim971PluritechnicianCommented:
done
0
 
Rowby GorenAuthor Commented:
It turned out I used supersidzed and it worked excellently -- no conflicts, etc.

Thanks!
0
 
Rowby GorenAuthor Commented:
Hello

The correct awards are now in place for : leakim971   Thank you Moderator
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.