Fonctionne sous IE6 mais pas sous Firefox - Help

**fma2112** · 03/06/2006, 20h36

Bonjour,

Je suis un débutant mais vraiment un débutant en javascript et j'avous avoir quelque peu luté pour écrire quelques ligne de JavaScripts qui vont vous paraître dérisoir.

Mon code fonctionne sous IE6 mais sous Firefox (que je préfère) j'ai l'erreur suivante :

Error: document.getElementById(showPreview) has no properties
Source File: file:///C:/Temp/Gallery/JALBUM/TEST_GIF_CSS/02-CSS%20Switcher/TEST_02/thememgr12ff.htm
Line: 85

J'ai supprimé à quelques endroits les variables de fonction JS par les valeurs en dure pour trouver mon erreur. Mais je tourne en ronds !!!

Voila mon code :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<link rel="stylesheet" type="text/css" id="defaultTheme" title="cBlack" href="./res/theme/black.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="c3d_Light" href="./res/theme/3d_light.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="c3d_Dark" href="./res/theme/3d_dark.css" />

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

<script type="text/javascript">

/* window.onload=function() */

function currentTheme()
{
var formref=document.getElementById("thememgrform")
indicateSelected(formref.switchcontrol)
var currentTheme = getCookie("mysheet")
var selectedTheme = document.getElementById('switchcontrol').value
showThemePreview(currentTheme);
if (currentTheme == selectedTheme)
{
disableObject('thememgrbutton');
}
if (currentTheme != selectedTheme)
{
enableObject('thememgrbutton');
}
}

function changeTheme(objID)
{
var chooseTheme = document.getElementById(objID)
chooseStyle(chooseTheme.options[chooseTheme.selectedIndex].value, 60);
disableObject('thememgrbutton');
}

function enableObject(objID)
{
document.getElementById('thememgrbutton').disabled=false;
document.getElementById('thememgrbutton').value='Apply selected theme...';
}

function disableObject(objID)
{
document.getElementById('thememgrbutton').disabled=true;
document.getElementById('thememgrbutton').value='Theme already applied';
}

function selectTheme(objID)
{
var currentTheme = getCookie("mysheet");
alert('currentTheme : "'+currentTheme+"'"); // debug //
var selectedTheme = document.getElementById(objID).value;
alert('selectedTheme : "'+selectedTheme+"'"); // debug //
changeThemePreview(selectedTheme);
//hideThemePreview()
//showThemePreview(selectedTheme)
if (currentTheme == selectedTheme )
{
disableObject('thememgrbutton');
}
if (currentTheme != selectedTheme )
{
enableObject('thememgrbutton');
}
}

function changeThemePreview(themeName)
{
hideThemePreview()
showThemePreview(themeName)
}

function showThemePreview(themeName)
{
var showPreview = 'thm_prev_' + themeName
alert('showPreview : "'+showPreview+"'") // debug //
document.getElementById(showPreview).style.display='block'
}

function hideThemePreview()
{
allThemePreview = document.getElementsByName("thm_preview")
for (i=0; i<allThemePreview.length; i++)
{
var temp = allThemePreview[i].id;
document.getElementById(temp).style.display='none';
}
}

</script>

</head>

<body onload="currentTheme()">

<BR>

<TABLE align="center" name="thememgrtable" style="width:400px;" class="infotable" cellspacing="0" cellpadding="2">
<TR>
<TD align="center" valign="middle" class="smalltxt">Theme Manager</TD>
</TR>
</TABLE>
<BR>
<BR>
<TABLE align="center" style="width:400px;" cellspacing="0" cellpadding="2">
<TR>
<TD align="right" valign="middle" class="smalltxt" width="139">Theme:</TD>
<TD align="auto" height="100%">
<form id="thememgrform" style="margin:0; position: relative; left:0; top:0; right:0; bottom:0; word-spacing:0">
<select id="switchcontrol" name="switchcontrol" size="1" onchange="selectTheme('switchcontrol')" style="font-family: Verdana; font-size: 8pt; background-color:#000000; color:#888888; text-decoration:none; " tabindex="1">
<option value="cBlack" selected="selected">Chameleon Black</option>
<option value="c3d_Light">Chameleon 3D Light</option>
<option value="c3d_Dark">Chameleon 3D Dark</option>
</select>
</form>
</TD>
</TR>
</TABLE>
<BR>
<BR>
<TABLE align="center" style="width:400px;" cellspacing="0" cellpadding="2">
<TR>
<td align="center" class="previewtable_up"> </td>
</TR>
<TR>
<td align="center" class="previewtable_mid">
<div id="thm_prev_cBlack" align="center">
<a id="thm_prev_cblack" name="thm_preview" href="javascript:void(0)" onClick="changeTheme('switchcontrol')" title="Apply this theme"></a>
</div>
<div id="thm_prev_c3d_dark" align="center">
<a id="thm_prev_c3d_dark" name="thm_preview" href="javascript:void(0)" onClick="changeTheme('switchcontrol')" title="Apply this theme"></a>
</div>
<div id="thm_prev_c3d_light" align="center">
<a id="thm_prev_c3d_light" name="thm_preview" href="javascript:void(0)" onClick="changeTheme('switchcontrol')" title="Apply this theme"></a>
</div>
</td>
</TR>
<TR>
<td align="center" class="previewtable_btm"> </td>
</TR>
<BR>
</TABLE>
<BR>
<TABLE align="center" style="width:400px;" cellspacing="0" cellpadding="2">
<TR>
<TD align="middle">
<input id="thememgrbutton" name="thememgrbutton" type="button" value="Apply selected theme..." onClick="changeTheme('switchcontrol')" style="background:#000000 url('res/Theme/black/bg.gif') center; font-family: Verdana; font-size: 8pt; border-style: solid; border-width: 1px; color:#888888; padding-left:0" tabindex="2">
</TD>
</TR>
</TABLE>

<input id="thememgrbutton2" type="button" name="button" value="Test JS" onClick="Test2('switchcontrol')" style="background:#000000 url('res/Theme/black/bg.gif') center; font-family: Verdana; font-size: 8pt; border-style: solid; border-width: 1px; color:#888888; padding-left:0" tabindex="2">
<input id="thememgrbutton3" type="button" name="button" value="Test JS2" onClick="changeTheme('switchcontrol')" style="background:#000000 url('res/Theme/black/bg.gif') center; font-family: Verdana; font-size: 8pt; border-style: solid; border-width: 1px; color:#888888; padding-left:0" tabindex="2">

</body>

</html>

Jutilise un script de chez dynamic drive qui premet de midifier en directe l'apparence des pages via des thèmes CSS. J'ai une ou deux erreurs de CSS dans les seconds thèmes mais le principale fonctionne.

Si quelqu'un pouvait me donner un p'tit coup de main ... Merci d'avance.
Je joins un exemple de mon code avec les thèmes tout le toutim dans le fichier zip.

Merci
FMA