CSS image change help needed!

[azartist]

OK, so I am in way over my head. I have been able to change a few things on a css file for some web pages a client needs help with. I know VERY LITTLE about css / html in general. Usually I can stumble my way through it through trial and error, but in this instance I don't have much time.

I need to be able to swap a main image that is called up in the CSS (img_banner.jpg)... this needs to change for each page. Right now they are using the same image for each page, but now each page will need to have a new image (img_banner.jpg, img_banner2.jpg, img_banner3.jpg, ...).

How is this done with the CSS? I hope I have made myself clear, and I hope I have posted in the right place. I have copied the top portion of the code below of the CSS.

Desperate!! Any help will be greatly appreciated!


body {
font:normal 12px Arial, Helvetica, sans-serif;
background:url(../images/body_bg.jpg) repeat-x left top;
margin:0 auto;
color:#6e9bad;
}

/*Reset Styles!*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}

img { float:left; }

.clear { clear:both; }

.img_right { float:right; }

.bottom_padding{
padding:0 0 15px 0;
}

.line_height{
line-height:25px;
}

/*Main Container*/

#container {
clear:both;
width:932px;
margin:0 auto;
}

/*Header*/

#header {
width:932px;
float:left;
}

/*Top Area */

#top {
background:url(../images/top_bg.jpg) repeat-x left top;
width:905px;
padding:0 0 33px 0;
float:right;
}

.logo {
margin:47px 0 0 9px;
}

#top h2 {
float:left;
font:bold 20px "Trebuchet MS";
color:#63340a;
padding:64px 0 0 106px;
}

.space {
padding:0 0 0 47px;
}

#top h3 {
float:right;
width:214px;
font:normal 12px Arial, Helvetica, sans-serif;
padding:52px 0 0 0;
}

#top h3 strong {
background:url(../images/img_phone.jpg) no-repeat left top;
color:#87afbf;
font-weight:bold;
padding:0 0 2px 25px;
margin:0 0 5px 0;
float:left;
}

#top h3 u {
color:#63340a;
font:bold 25px Arial, Helvetica, sans-serif;
clear:both;
margin:0 0 8px 0;
float:left;
text-decoration:none;
}

#top h3 label {
color:#87afbf;
float:left;
width:214px;
}

/*Navigation-banner*/

#nav-banner {
width:932px;
float:left;
padding:0 0 6px 0;
}

.space2 {
padding:0 0 0 5px;
}

.space3 {
padding:0 0 0 9px;
}

#banner {
width:704px;
float:left;
}

#banner span {
background:url(../images/img_banner.jpg) no-repeat left top;
width:201px;
float:left;
margin:0 0 0 9px;
font:bold 14px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding:226px 0 20px 300px;
}

/*Left Navigation*/

#left_navigation {
background:url(../images/img_left_nav.jpg) no-repeat left bottom;
width:227px;
float:left;
}

#left_navigation_inner {
background:url(../images/img_left_nav_rpt.jpg) repeat-y left;
width:201px;
float:right;
height:278px;
}

#left_navigation_inner ul {
float:left;
font:bold 12px Arial, Helvetica, sans-serif;
color:#FFFFFF;
width:195px;
padding:0 0 17px 0;
}

#left_navigation_inner li {
background:url(../images/img_left_nav_sep.jpg) no-repeat 5px bottom;
list-style:none;
padding:8px 0 7px 16px;
line-height:16px;
}

#left_navigation_inner li a:link, #left_navigation_inner li a:visited, #left_navigation_inner li a:active {
color:#FFFFFF;
text-decoration:none;
}

#left_navigation_inner li a:hover {
color:#CCFFFF;
text-decoration:none;
}

[sdpetersen]

Typically I create this type of capability using a server-side language such as ASP or PHP, but you can't really do it within the CSS file itself. You'd have to put that bit of CSS in each individual file. (go to my site http://www.mohicanwebware.com and view the source to see how some of the CSS is page specific - that is generated by ASP).

If each page is unique, you could simply put that line of CSS code in the header of each page.

Finally, the trickiest way to do it would be with JavaScript:

• Create a CSS class for each page and put them in your CSS file
• Save your URL to a variable
• Detect which page you're on
• Change the class of your Span object with the background image to be the class that corresponds to the current page using a line similar to document.getElementById('YOURSPANID').className = 'NEWCLASSNAME';

And if none of that works for you, post a link to your website so we can see how your website works and go from there.