Solved

Background image "changes" upon click to next webpage

Posted on 2014-01-10
12
307 Views
Last Modified: 2014-01-19
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
0
Comment
Question by:Rowby Goren
  • 7
  • 3
12 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39772814
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39772852
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39773388
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 39774872
Your script simply slects randomly one image between the six available. Are you looking for another criteria to load and change the images?
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39774877
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39790045
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39790032
Ooops. I selected me for the points.

Moderator please undo the points and I will fix it.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39790046
Moderator please undo the points and I will fix it.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39790047
done
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39790125
It turned out I used supersidzed and it worked excellently -- no conflicts, etc.

Thanks!
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39792662
Hello

The correct awards are now in place for : leakim971   Thank you Moderator
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now