Forum Moderators: open
The reason for this is everytime a link is clicked I want to pass the value of the link to the switchsytles() and have it load that stylesheet instead of the default one. Thanks for all the help in advance!
TIP #1: Never use eval. There is always something better.
(When you know of the 1 or 2 exceptions, you won't be needing my advise anyway. Just don't use it.)
You probably meant document.write(), but that would overwrite the page.
In fact, switching stylsheets is easier.
[tested IE]
<html>
<head>
<title>Stylesheet Swap</title>
<link rel = "stylesheet" href = "sheet1.css" type = "text/css">
<link rel = "stylesheet" href = "sheet2.css" type = "text/css" disabled="true">
<link rel = "stylesheet" href = "sheet3.css" type = "text/css" disabled="true">
<!-- keep script block, or link below stylesheets -->
<script language="JavaScript">var sheets = document.styleSheets
var iCurrSheet = 0function toggleSheets(index)
{
sheets[iCurrSheet].disabled = true
sheets[index].disabled = false
iCurrSheet = index
}</script>
</head>
<BODY>
<div style="width:100px;">demo div</div>
<!-- void(0) prevents link being followed -->
<a href="javascript:toggleSheets(0);void(0)">Sheet 0 ¦ div{background-color:red;}</a></br>
<a href="javascript:toggleSheets(1);void(0)">Sheet 1 ¦ div{background-color:green;}</a></br>
<a href="javascript:toggleSheets(2);void(0)">Sheet 2 ¦ div{background-color:blue;}</a></body>
</html>
This will change the style sheet...
<html>
<head><link id="default" rel="stylesheet" type="text/css" href="http://www.test.com/includes/style.css">
<script type="text/javascript">
<!--
function testStyles() {
if(document.getElementById('default').href=='http://www.test.com/includes/style.css') {
alert('TestDefault');
}
else {
if(document.getElementById('default').href=='http://www.test.com/health/includes/style_hc.css') {
alert('Test');
}
}
}
function switchStyles(url) {
document.getElementById('default').href=url;
alert(document.getElementById('default').href);
}
onload=testStyles;
//-->
</script>
</head>
<body>
<div>
<a href="#" onclick="testStyles();switchStyles('http://www.test.com/health/includes/style_hc.css')">style_hc.css</a><br />
<a href="#" onclick="testStyles();switchStyles('http://www.test.com/includes/style.css')">style.css</a>
</div>
</body>
</html>
birdbrain
My current Mozilla doesn't recognise the 'disabled' attribute, and any attempt to change a linked sheet's href results in:
Error: setting a property that has only a getterThis is commonly done. So I'd better go have a peek somewhere.
TD.back
{
background-color:#000000;
background-image:url(http://www.test.com/images/sprigs_search.jpg);
}
and then call it like this:
<td class="back" width="175" height="95" bgcolor="#99CCCC">
It won't display anything. Anyone know what change I might have to make to get it work properly inside the <td> instead of just making it a background for the whole page?
<td style="BACKGROUND-IMAGE: url(http://www.test.com/stuff/images/sprigs_search.jpg);" width="175" height="95">
I can't have it like this since I'm changing the style sheets though so I need it to work from the stylesheets but I figured I'd give some more ideas that I've already tried!
The BG color spec in the CSS is being overridden by the (old-timey) bgcolor attribute in the tag. That said, I can't account for the BG image not appearing (this should appear 'over' the BG colour).
Remove bgcolor/background tag attributes, and see what happens from then on.
Maybe best to take this to the CSS forum too, where you'll find someone who knows their stuff.
