/    Sign up×
Community /Pin to ProfileBookmark

Changing CSS background image with switch statement…

Hey guys, hopefully someone can help me out here. I thought what I was trying to do was going to be simple, but unfortunately for me at least that hasn’t been the case. I usually write everything in VB 2008, but what I’m doing requires it to be in Javascript. The setup I have is a little too complex to explain, but let’s just say that I’m VERY restricted on how I have to go about this. I only have access to the Javascript source that is placed in the header of all pages and the universal css file. I can’t manipulate pages individually. The code I have is below and what I’m trying to do is read the pathname of the url and change the background image of header div based on that pathname. I only have 6 pages so I just created a switch statement to change the image, but it’s not executing any of my cases and even when I tested it outside the switch it doesn’t change the background image in the stylesheet.

Javascript————————————–

window.onload = changeHeader();

function changeHeader() {
var site = location.pathname;
switch (site)
{
case “/link1.aspx” :
document.getElementById(“header”).style.background=”background-image: url(‘/data/header_x2.jpg’) no-repeat”;
break;

case “/link2.aspx” :
document.getElementById(“header”).style.background=”background-image: url(‘/data/header_x3.jpg’) no-repeat”;
break;

case “/link3.aspx” :
document.getElementById(“header”).style.background=”background-image: url(‘/data/header_x4.jpg’) no-repeat”;
break;

case “/link4.aspx” :
document.getElementById(“header”).style.background=”background-image: url(‘/data/header_x5.jpg’) no-repeat”;
break;

case “/link5.aspx” :
document.getElementById(“header”).style.background=”background-image: url(‘/data/header_x6.jpg’) no-repeat”;
break;

default :
document.getElementById(“header”).style.background=”background-image: url(‘/data/header_x1.jpg’) no-repeat”;
break;
}
}

DIV Tag————————————

<div id=”header”>
…content
</div>

CSS STYLE———————————-

#header {
background: url(‘/data/header_x1.jpg’) no-repeat;
width:800px;
height:120px;

}

Thanks for any help!

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@donatelloJul 06.2008 — I dunno if my answer is what you are looking for, but I accidentally stumbled into what may be a solution for you.

You see, I downloaded a template from OSWD and after I started working with it in DreamWeaver, I noticed that it had a switchable stylesheet and CSS. Colors, etc.

I never used this functionality and have no need for it on my page, but there might be a snippet of code in there that lights a bulb for you...

The template is called: nonzero

Got to http://www.oswd.org and look it up.

Hope this helps.
Copy linkTweet thisAlerts:
@Declan1991Jul 06.2008 — I thought I'd replied to this, but here is the solution:window.onload = changeHeader;
×

Success!

Help @All_Beagle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...