No replies to this topic

[se1zure]

okay, i am making a theme switcher for my site, and There is just 1 image I want to get swapped out... problem 1, it's set as the background of a table. problem two, I need a css script that I can set which images will appear and wont, so when I switch styles the other header will appear, and the current one will dissapear... So far, I can switch the css for the page to go from black to red links, now i just need to know how to do images!!! plz help! thanx!

oh, btw this is what I have so far:

for the external css:

<link rel="stylesheet" type="text/css" href="preferred.css" title="default">

<link rel="alternate stylesheet" type="text/css" href="alternate.css" title="Blue">

<script type="text/javascript" src="styleswitcher.js"></script>


Here is the link to switch the sheets

<a href="#" onclick="setActiveStyleSheet('Blue'); return false;">Blue</a>


Here is where the image is that I want to swap out (style is default, style1 is the swapped out image):

<td align="center" background="images/v2_02.png" width="480" height="215" alt="" class="style" background="images/blue.jpg" width="480" height="215" alt="" class="style1">


Here is my default css:
<STYLE TYPE="text/css">
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: white;
}
a:link { color: white; text-decoration: none; font-family: Verdana; font-weight: bold; font-size: 10px}
a:active { color: white; text-decoration: none; font-family: Verdana; font-weight: bold; font-size: 10px}
a:visited { color: white; text-decoration: none; font-family: Verdana; font-weight: bold; font-size: 10px}
a:hover { color: black; text-decoration: none; font-family: Verdana; font-weight: bold; font-size: 10px}
</STYLE>

<style type="text/css">
.style {display:;}
.style1 {display:none;}
.style2 {display:none;}
</style>

Here is what I want to switch to:
<STYLE TYPE="text/css">
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: white;
}
a:link { color: white; text-decoration: none; font-family: Verdana; font-weight: bold; font-size: 10px}
a:active { color: white; text-decoration: none; font-family: Verdana; font-weight: bold; font-size: 10px}
a:visited { color: white; text-decoration: none; font-family: Verdana; font-weight: bold; font-size: 10px}
a:hover { color: black; text-decoration: none; font-family: Verdana; font-weight: bold; font-size: 10px}
</STYLE>

<style type="text/css">
.style {display:none;}
.style1 {display}
.style2 {display:none;}
</style>

Double posts merged by Adam. Next time use edit

Edited by adam123, 09 August 2005 - 10:13 AM.