Simple Div Background image swap

**SpecVengeance** · 02-10-2009, 07:48 PM

What I am trying to do is attach a simple script that switches the Background image that is associated with a container div that holds the entire site.

It has been years since I have coded javascript and I am trying to get the rust off the joints lol.

Code:

<script //>
function bgChange(bg)
{
document.body.getElementById(container).style.background =bg;
}
</script>

////////////////////////////////////////////////////////////////

<div id="container">


<a href="j javascript:bgChange('assets/images/chrisgraser_work_link_background.jpg');" onClick="selectLink(this)">Home</a></td>

</div>

I guess I will start off with a what I am I doing wrong, and will go from there.

Thank you in advance for your help

**jscheuer1** · 02-11-2009, 01:38 AM

Originally Posted by SpecVengeance

I guess I will start off with a what I am I doing wrong, and will go from there.

OK, in that case changing the background for a division on a single page will have no effect on the site, just on that page until it is loaded the next time.

Also, this is wrong:

Code:

document.body.getElementById(container).style.background =bg;

and the variable bg must conform to the proper syntax or be included in a string value that will make it valid for the purpose at hand, and if you are only changing the background image:

Code:

document.getElementById('container').style.backgroundImage = 'url(' + bg + ')';

This is confused:

Code:

<a href="j javascript:bgChange('assets/images/chrisgraser_work_link_background.jpg');" onClick="selectLink(this)">Home</a></td>

No td is open, so it should not be closed. The href="j . . ." is invalid, probably will throw an error if the script interpreter ever is asked to execute it. The onclick event is unexplained by what you posted, and what's "Home" in this context mean?

So confused that I can only guess, perhaps:

Code:

<a href="#" onclick="bgChange('assets/images/chrisgraser_work_link_background.jpg');this.style.visibility = 'hidden';return false;">Change Background Image to chrisgraser_work_link_background.jpg</a>

If you want the effect to be site wide and/or persistent (within the limitations of javascript), and you have more than one page, cookies will be needed.

If you are willing to work with it, this script:

http://www.dynamicdrive.com/dynamici...etswitcher.htm

may be able to help you accomplish your goals without too much 'reinvention of the wheel'.

**SpecVengeance** · 02-11-2009, 01:56 AM

Originally Posted by jscheuer1

OK, in that case changing the background for a division on a single page will have no effect on the site, just on that page until it is loaded the next time.

Also, this is wrong:

Code:

document.body.getElementById(container).style.background =bg;

and the variable bg must conform to the proper syntax or be included in a string value that will make it valid for the purpose at hand, and if you are only changing the background image:

Code:

document.getElementById('container').style.backgroundImage = 'url(' + bg + ')';

This is confused:

Code:

<a href="j javascript:bgChange('assets/images/chrisgraser_work_link_background.jpg');" onClick="selectLink(this)">Home</a></td>

No td is open, so it should not be closed. The href="j . . ." is invalid, probably will throw an error if the script interpreter ever is asked to execute it. The onclick event is unexplained by what you posted, and what's "Home" in this context mean?

So confused that I can only guess, perhaps:

Code:

<a href="#" onclick="bgChange('assets/images/chrisgraser_work_link_background.jpg');this.style.visibility = 'hidden';return false;">Change Background Image to chrisgraser_work_link_background.jpg</a>

If you want the effect to be site wide and/or persistent (within the limitations of javascript), and you have more than one page, cookies will be needed.

If you are willing to work with it, this script:

http://www.dynamicdrive.com/dynamici...etswitcher.htm

may be able to help you accomplish your goals without too much 'reinvention of the wheel'.

Thank you for pointing out my syntax problems, but there was a large piece of code I left out for simplicity sake.

HTML 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>homepage</title>
<link rel="stylesheet" type="text/css" href="assets/css/master.css" title="default"/>
<script type="text/javascript" src="assets/includes/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="assets/includes/animatedcollapse.js"></script>
<script type="text/javascript" src="assets/includes/styleswitch.js" ></script>
<script type="text/javascript">
animatedcollapse.addDiv('homepage_nav', 'fade=1,speed=400,group=all,persist=1,hide=1')
animatedcollapse.addDiv('home_link', 'fade=1,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('about_link', 'fade=1,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('work_link', 'fade=1,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('contact_link', 'fade=1,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.init()

var selectedLink;
function selectLink(lnk) {
  if (selectedLink) selectedLink.style.fontWeight='normal';
  lnk.style.fontWeight='bold';
  selectedLink=lnk;
}


function bgChange(bg)
{
document.getElementById('container').style.background =bg;
}

//-->
</script>


            
</head>
<body id="home">
<div id="container">
  <div id="home_name_image"><img src="assets/images/transparent_chrisgraser_homepage.png" width="342" height="128" /></div>  <div id="menu"><a href="javascript:animatedcollapse.toggle('homepage_nav')">The Menu</a></div>
<div id="homepage_nav">
<span style="font-size:10px; color:#FFFFFF;">(click "The Menu" again to collapse)</span>
	<table>	
        <tr>
        	<td>
            	<div id="about_button">

            	<a href="javascript:animatedcollapse.toggle('about_link')" onClick="selectLink(this)">
                	About Me
                </a>
                </div>
                <div id="about_link" class="display_area">
					<div id="about_info">
First and formost, Welcome to Chrisgraser.com and thank you for stopping in to see my work<br />
My name is Chris Graser and I am jack of all trades.<br />
<br />
I do a little bit of everything when it comes to the web, and I am only learning more every day. If there is something that I do not know I go out of my way to learn how to do what I want to. from extensive searching to experimenting, I will use every tool at my disposal to develop a solution to whatever problem that may arise in my path.
With this web site, it is my goal to portfolio my work and my thoughts about my work. I invite you to browse around and leave me feedback for my work or contact me if you have any questions.

<br />

As you browse around the site and look through my portfolio I hope you will see the progression that I as a designer and developer have made in the past 4 years.
</div>
                </div>
                <div class="clear"></div>
            </td>
        </tr>
        <tr>
        	<td>
            	<div id="work_button">

            	<a href="javascript:animatedcollapse.toggle('work_link')" onClick="selectLink(this)">
                	My Work
                </a>
                </div>
                <div id="work_link" class="display_area">
					<div id="about_info">
First and formost, Welcome to Chrisgraser.com and thank you for stopping in to see my work<br />
My name is Chris Graser and I am jack of all trades.<br />
<br />
I do a little bit of everything when it comes to the web, and I am only learning more every day. If there is something that I do not know I go out of my way to learn how to do what I want to. from extensive searching to experimenting, I will use every tool at my disposal to develop a solution to whatever problem that may arise in my path.
With this web site, it is my goal to portfolio my work and my thoughts about my work. I invite you to browse around and leave me feedback for my work or contact me if you have any questions.

<br />
<br />
<br />
As you browse around the site and look through my portfolio I hope you will see the progression that I as a designer and developer have made in the past 4 years.
</div>
                </div>
                <div class="clear"></div>
            </td>
        </tr>
        <tr>
        	<td>

            	<div id="contact_button">
            	<a href="javascript:animatedcollapse.toggle('contact_link')" onClick="selectLink(this)">
                	Contact Me
               	</a>
                </div>
                <div id="contact_link" class="display_area">
					<div id="contact_info">

                <h1> Send Me Feedback!</h1>

        <p> I would greatly appreciate any feedback that anyone would like to give me. If you have any questions or comments feel free to E-mail me with the form below.</p>
                        <div id="form">
        <form action="" method="post" name="contactForm" id="contactForm" onsubmit="MM_validateForm('fname','','R','emai','','RisEmail','message','','R');return document.MM_returnValue">
      <p>
        	<label for="name">Name:</label>            <br />
			<input type="text" name="name" id="name" />
        </p>

        <p>
        	<label for="email">Email:</label>            <br />
            <input type="text" name="email" id="email" />
        </p>
        <p>
        	<label for="messageBody"> Message:</label>            <br />

            <textarea name="messageBody" id="messageBody"></textarea>
       	</p>
        <p>
        	<input name="ewComments" type="submit" id="ewComments" value="Send comments" />
        </p>
        </form>
                </div>
</div>
                </div>

                <div class="clear"></div>
           </td>
        </tr>
    </table>
</div>
<div class="clear"></div>



</div>
</body>
</html>

Plus there are a bunch of linked files as well.

**SpecVengeance** · 02-11-2009, 02:12 AM

Ok That worked perfectly, now "IF" I wanted to apply this to the body tag, would it be?

Code:

document.body.background ( bg );

**SpecVengeance** · 02-11-2009, 02:16 AM

John even though you havn't responded yet, Thank you So much It works exactly the way I need it to...Now for transitions!

**jscheuer1** · 02-11-2009, 04:41 AM

Glad things are working out for you. Just for your information though:

Originally Posted by SpecVengeance

Code:

document.body.background ( bg );

Will work in some cases (where it is not overridden by style), if written correctly (though some browsers might accept it as you have it, I honestly have never seen or tried it like that). The more generally accepted version is:

Code:

document.body.background = bg ;

But that's dependant upon a deprecated attribute of the body tag. It's the javascript equivalent of the deprecated HTML:

HTML Code:

<body background="assets/images/chrisgraser_work_link_background.jpg">

Which using current standard methods would be:

HTML Code:

 . . .
<style type="text/css">
body {
background-Image: url(assets/images/chrisgraser_work_link_background.jpg);
}
</head>
<body> . . .

A javascript equivalent of which is:

Code:

document.body.style.backgroundImage = 'url(assets/images/chrisgraser_work_link_background.jpg)';

Thread: Simple Div Background image swap

Thread Tools

Search Thread

Simple Div Background image swap

Bookmarks

Bookmarks

Posting Permissions