Css And Tables

Ok I have a table, it uses an image to give the table it's color.

Code:

---

<tr>
  <td background="toptableheader.jpg" height="18">
  <div align="center">
          <font face="Verdana, Arial, Helvetica, sans-serif" size="1">
          7th Grade Homework</font>

---

Now I want the website to be skin enabled. Here is the skin code.

Code:

---

<select onChange="changeskin(this.options[this.selectedIndex].value); window.location.reload();" name="D1">
<option>Change Skin
<option>
<option value="lblue"> Light Blue
<option value="black"> Black
<option value="pink"> Pink
<option value="plain"> Plain
<option value="christmas"> Christmas
<option value="girl"> Girly
<option value="new"> New Years
<option value="america"> American Patriotism
<option value="cs"> Counter-Strike
<option value="diablo"> Diablo II
<option value="sc"> Starcraft
<option value="wc"> Warcraft III
<option value="wy"> Whitney Young
</select>

---

Code:

---

<script language="JavaScript">
<!--

/*
Copyright SSdesign
*/

var scheme = getCookie('template1');
if (scheme == 'lblue') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin.2css">');
} else if (scheme == 'black') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin3.css">');
} else if (scheme == 'pink') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin4.css">');
} else if (scheme == 'plain') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin5.css">');
} else if (scheme == 'christmas') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin6.css">');
} else if (scheme == 'girl') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin7.css">');
} else if (scheme == 'new') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin8.css">');
} else if (scheme == 'america') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin9.css">');
} else if (scheme == 'cs') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin10.css">');
} else if (scheme == 'diablo') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin11.css">');
} else if (scheme == 'sc') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin12.css">');
} else if (scheme == 'wc') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin13.css">');
} else if (scheme == 'wy') {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin14.css">');
} else {
document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin1.css">');
}


function changeskin(change) {
var scheme = change;
var name = 'template1';
var pathname = location.pathname;
var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
var ExpDate = new Date ();
ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
setCookie(name,scheme,ExpDate,myDomain);
}
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}

function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}
-->
</script>

---

How can I have CSS change the image?

ummmm...
off the top of me head....

sparsely thinks:
give the TD a class/ID and set it's background-image:url(blahblahblah) properties in each stylesheet.

Sparsley is right.

An example is:

background-image: url("http://www.ynhockey.net/stylesheets/styles.css");

However, something you should know is that a serverside skin changer > JS skin changer. Totally.

I don't know why ppl still use JS for thins like this...

I tried that. Give me more in-depth information.

How to class a table. Teach me.

Code:

---

<style>
   .bg { background-image:url("http://www.website.com/file.jpg"); }
</style>

<table>
   <tr>
      <td class="bg">
         CONTENT HERE
      </td>
   </tr>
</table>

---

____________________________________

I think you hung out with the CSS freaks at www.tutorialforums.com too much... they think that you can't possibly use CSS with tables.

okay.
in teh .css file for each theme, add a line like this

Code:

---

.tdimg
{
background-image:url(/images/tdimg.gif);
}

---

the leading dot (.tdimg) makes it a class. you can name it whatever you want.

for each theme's css, change the url in the background-image line to the image you want to use as a table background.

then, where you have this:

Quote:

---

<tr>
<td background="toptableheader.jpg" height="18">
<div align="center">
<font face="Verdana, Arial, Helvetica, sans-serif" size="1">
7th Grade Homework</font>

---

take out the background="toptableheader.jpg" and replace it with class="tdimg" (or whatever you named it in the step above.

easy;)