Solved

Background image "changes" upon click to next webpage

Posted on 2014-01-10
12
313 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

 
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
 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
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)

731 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