fullscreen background with changeable links (need help with a fade effect)

**hall2003** · 07-02-2012, 01:57 PM

hello, im looking for some help with some code ive picked up and edited from the web.

the code ive made works perfect to change the background image using the links on the page, but i would really like some kind of fade effect to the next image.

please could someone help me to achieve a fade effect with the my script..

thanks, in advance for any help provided..

here is the code

------------

<body onload="javascript:changeBGImage(0)"/>

<style>
* { margin: 0; padding: 0; top-margin: 0;}
.bgchange {
* { margin: 0; padding: 0; top-margin: 0;}

html {
background: no-repeat center right fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

</style>

<script type="text/javascript">
var backImage = [
"images/bg0.jpg",
"images/bg1.jpg",
"images/bg2.jpg",
"images/bg3.jpg" ];

function changeBGImage(whichImage) {
if (document.body){
document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
document.body.className = 'bgchange';
} }; </script>

<a href="javascript:changeBGImage(0)">bg0</a>
<br>
<a href="javascript:changeBGImage(1)">bg1</a>
<br>
<a href="javascript:changeBGImage(2)">bg2</a>
<br>
<a href="javascript:changeBGImage(3)">bg3</a>

**bernie1227** · 07-03-2012, 04:23 AM

Hiya,
Please encase your code in [CODE] tags.
I have two jsfiddles which may help you here, one particularly for backgrounds and the other for just img's which you could adapt.
Background jsFiddle: here
Regular one: here
Bernie

**vwphillips** · 07-03-2012, 09:40 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div style="height:2000px;" >content
<br />
<input type="button" name="" value="Change BackGround 1" onmouseup="zxcBackGround.swap('bg','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"/>
<br />
<input type="button" name="" value="Change BackGround 2" onmouseup="zxcBackGround.swap('bg','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');"/>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Swap Back Ground Image (3-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcBackGround={

 init:function(id,url,ms){
  var mark=document.createElement('DIV'),bg;
  mark.style.position='fixed';
  bg=mark.cloneNode(false);
  mark.style.width='0px';
  mark.style.height='0px';
  mark.style.bottom='0px';
  mark.style.right='0px';
  document.body.appendChild(mark);
  bg.style.zIndex='-1';
  bg.style.left='0px';
  bg.style.top='0px';
  bg.style.width='100%';
  bg.style.height=mark.offsetTop+'px';
  bg.style.backgroundImage='url('+url+')';
  document.body.appendChild(bg);
  this[id]={
   mark:mark,
   bg:bg,
   ms:ms
  }
  this.addevt(window,'resize','resize',id);
 },

 swap:function(id,url){
  var o=this[id];
  if (o){
   clearTimeout(o.dly);
   this.animate(o,100,0,new Date(),o.ms,url);
  }
 },

 resize:function(id){
  var o=this[id];
  if (o){
   o.bg.style.height=o.mark.offsetTop+'px';
  }
 },

 animate:function(o,f,t,srt,mS,url){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.bg.style.filter='alpha(opacity='+now+')';
   o.bg.style.opacity=o.bg.style.MozOpacity=o.bg.style.WebkitOpacity=o.bg.style.KhtmlOpacity=now/100-.001;
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,url); },10);
  }
  else if (url){
   o.bg.style.backgroundImage='url('+url+')';
   this.animate(o,0,100,new Date(),o.ms);
  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 }

}

zxcBackGround.init('bg','http://www.vicsjavascripts.org.uk/StdImages/One.gif',1000);

/*]]>*/
</script></body>

</html>

**hall2003** · 07-03-2012, 12:26 PM

hi vic thanks for taking a look at that for me and finding that solution, it works great in firefox and safari but doesnt work on my internet explorer, do you think you could just have a quick look at it again to seee why explorer wont use the script?? als when it fades to the next image is it possible to crossfade the image when fading to the next image?

thanks for the quick reply though im really grateful, see im wanting to change the background when the link is clicked and im going to code it so that it changes a div of info as if changing the page if you know what i mean..

also is it possible to make the image center right fixed? so it moves when the window is resized - so the right of the image is alway viewed if the window is resized and the height centers the height too if the window is shrunk down... with the no repeat too..

kind of like in this css what i had on the old script...

<style>

.bgchange {
background: no-repeat center right fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

thanks mate, its a very good effort that script youve done.. if it can be tweaked a little to the way i need it it would be fantastic!

**vwphillips** · 07-03-2012, 12:57 PM

I tested this with IE8 and it works for me

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div style="height:2000px;" >content
<br />
<input type="button" name="" value="Change BackGround 1" onmouseup="zxcBackGround.swap('bg','http://www.vicsjavascripts.org.uk/StdImages/One.gif');"/>
<br />
<input type="button" name="" value="Change BackGround 2" onmouseup="zxcBackGround.swap('bg','http://www.vicsjavascripts.org.uk/StdImages/Two.gif');"/>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Swap Back Ground Image (3-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcBackGround={

 init:function(id,url,ms){
  var mark=document.createElement('DIV'),bg,d1,d2;
  mark.style.position='fixed';
  bg=mark.cloneNode(false);
  mark.style.width='0px';
  mark.style.height='0px';
  mark.style.bottom='0px';
  mark.style.right='0px';
  document.body.appendChild(mark);
  bg.style.zIndex='-1';
  bg.style.left='0px';
  bg.style.top='0px';
  bg.style.width='100%';
  bg.style.height=mark.offsetTop+'px';
  bg.style.backgroundImage='url('+url+')';
  document.body.appendChild(bg);
  d1=bg.cloneNode(false);
  bg.appendChild(d1);
  this[id]={
   mark:mark,
   fade:d1,
   bg:bg,
   ms:ms
  }
  this.addevt(window,'resize','resize',id);
 },

 swap:function(id,url){
  var o=this[id];
  if (o){
   clearTimeout(o.dly);
   this.animate(o,100,0,new Date(),o.ms,url);
  }
 },

 resize:function(id){
  var o=this[id];
  if (o){
   o.bg.style.height=o.mark.offsetTop+'px';
   o.fade.style.height=o.mark.offsetTop+'px';
  }
 },

 animate:function(o,f,t,srt,mS,url){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.fade.style.filter='alpha(opacity='+now+')';
   o.fade.style.opacity=o.fade.style.MozOpacity=o.fade.style.WebkitOpacity=o.fade.style.KhtmlOpacity=now/100-.001;
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,url); },10);
  }
  else {
   if (url){
    o.fade.style.backgroundImage='url('+url+')';
    this.animate(o,0,100,new Date(),o.ms);
   }
   else {
    o.bg.style.backgroundImage=o.fade.style.backgroundImage;
   }
  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 }

}

zxcBackGround.init('bg','http://www.vicsjavascripts.org.uk/StdImages/One.gif',1000);

/*]]>*/
</script></body>

</html>

**hall2003** · 07-03-2012, 01:55 PM

hi vic, yes it does work in ie... soryy for some reason when offline u need to f5 the page for it to work but on the server its fine...

is their any way that i can get the position more so that the image fits the browser window if the browser window is resized without it distorting te background image

i need the background image to always show the right side of the background image even if the browser window is resized and made smaller, and height wise center the image if browser window height is made smaller -

kind of like in this css

<style>

.bgchange {
background: no-repeat center right fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>

is it possible to do as the code is perfect except that the background image doesnt move when the window is resized or scale down to fit the resolution if you get me... im going to be using images that are 1920x1080 but obviously if someone uses a 1024x768 id like the image to scale down and fit their browser but use the positioning like in the css code above.

is this possible..

thanks for helping, steve

**vwphillips** · 07-03-2012, 03:15 PM

please post a link to a page with your background image

**hall2003** · 07-03-2012, 03:50 PM

here is the link using your script: http://www.directhoses.co.uk/test/

and here is the link with my original code - http://www.directhoses.co.uk/test/index2.htm

if you resize the page you should see on the original code the background resizes and centers when the browser window is manually resized using your mouse and dragging the browser window around.

thats what i need to happen on the page that uses your script

cheers, steve

**vwphillips** · 07-04-2012, 08:25 AM

the additional line in red gives the same appearance

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style>

.bgchange {
  background: no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	}
</style>
</head>

<body>
<div style="height:200px;" >content
<br />
<input type="button" name="" value="Change BackGround 1" onmouseup="zxcBackGround.swap('bg','http://www.directhoses.co.uk/test/images/bg1.jpg');"/>
<br />
<input type="button" name="" value="Change BackGround 2" onmouseup="zxcBackGround.swap('bg','http://www.directhoses.co.uk/test/images/bg2.jpg');"/>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Swap Back Ground Image (3-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

var zxcBackGround={

 init:function(id,url,ms){
  var mark=document.createElement('DIV'),bg,d1,d2;
  mark.style.position='fixed';
  bg=mark.cloneNode(false);
  mark.style.width='0px';
  mark.style.height='0px';
  mark.style.bottom='0px';
  mark.style.right='0px';
  document.body.appendChild(mark);
  bg.className='bgchange';
  bg.style.zIndex='-1';
  bg.style.left='0px';
  bg.style.top='0px';
  bg.style.width='100%';
  bg.style.height=mark.offsetTop+'px';
  bg.style.backgroundImage='url('+url+')';
  document.body.appendChild(bg);
  d1=bg.cloneNode(false);
  bg.appendChild(d1);
  this[id]={
   mark:mark,
   fade:d1,
   bg:bg,
   ms:ms
  }
  this.addevt(window,'resize','resize',id);
 },

 swap:function(id,url){
  var o=this[id];
  if (o){
   clearTimeout(o.dly);
   this.animate(o,100,0,new Date(),o.ms,url);
  }
 },

 resize:function(id){
  var o=this[id];
  if (o){
   o.bg.style.height=o.mark.offsetTop+'px';
   o.fade.style.height=o.mark.offsetTop+'px';
  }
 },

 animate:function(o,f,t,srt,mS,url){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.fade.style.filter='alpha(opacity='+now+')';
   o.fade.style.opacity=o.fade.style.MozOpacity=o.fade.style.WebkitOpacity=o.fade.style.KhtmlOpacity=now/100-.001;
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,url); },10);
  }
  else {
   if (url){
    o.fade.style.backgroundImage='url('+url+')';
    this.animate(o,0,100,new Date(),o.ms);
   }
   else {
    o.bg.style.backgroundImage=o.fade.style.backgroundImage;
   }
  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
 }

}

zxcBackGround.init('bg','http://www.directhoses.co.uk/test/images/bg0.jpg',1000);

/*]]>*/
</script></body>

</html>

_

**hall2003** · 07-04-2012, 10:18 AM

vic you are the man! works perfect I cant thank you enough...

steve

Thread: fullscreen background with changeable links (need help with a fade effect)

Thread Tools

Search Thread

fullscreen background with changeable links (need help with a fade effect)

Bookmarks

Bookmarks

Posting Permissions