The O.C.
|
|- index.htm
|- /styles
|- /js
|- /images
Styles
|
|- style_1.css (pink)
|- style_2.css (blå)
|- style_3.css (grøn)
|- style_4.css (orange)
|- style_5.css (gul)
|- style_6.css (rød)
Images
|
|- /1 (indeholder pink grafik)
|- /2 (indeholder blå grafik)
|- /3 (indeholder grøn grafik)
|- /4 (indeholder orange grafik)
|- /5 (indeholder gul grafik)
|- /6 (indeholder rød grafik)
I min index, loader jeg alle styles i <head> (for at få id's og classes preloaded), og derefter vælger jeg style_1.css som standard.
Når jeg skifter farve, gør jeg det via denne funktion:
function changeColor(thiscolor,newcolor)
{
if (document.getElementById('forrige').src == 'images/'+thiscolor+'/left_arrow.gif')
{ document.getElementById('forrige').src = eval('images/'+newcolor+'/left_arrow.gif'); }
else if (document.getElementById('forrige').src == 'images/'+thiscolor+'/left_arrow_alpha.gif')
{ document.getElementById('forrige').src = eval('images/'+newcolor+'/left_arrow_alpha.gif'); }
if (document.getElementById('naeste').src == 'images/'+thiscolor+'/right_arrow.gif')
{ document.getElementById('naeste').src = eval('images/'+newcolor+'/right_arrow.gif'); }
else if (document.getElementById('naeste').src == 'images/'+thiscolor+'/right_arrow_alpha.gif')
{ document.getElementById('naeste').src = eval('images/'+newcolor+'/right_arrow_alpha.gif'); }
document.getElementById("color1").href = 'java script: changeColor('+newcolor+',1);';
document.getElementById("color2").href = 'java script: changeColor('+newcolor+',2);';
document.getElementById("color3").href = 'java script: changeColor('+newcolor+',3);';
document.getElementById("color4").href = 'java script: changeColor('+newcolor+',4);';
document.getElementById("color5").href = 'java script: changeColor('+newcolor+',5);';
document.getElementById("color6").href = 'java script: changeColor('+newcolor+',6);';
newcolor=newcolor-1;
if(document.styleSheets)
{
for(var i=0; i < document.styleSheets.length; i++)
{
if(i != newcolor)
{
document.styleSheets[i].disabled=true;
}
else
{
document.styleSheets[i].disabled=false;
}
}
}
}
Funktionen vælger så den stylesheet som passer til "newcolor (som indeholder et tal fra 1-6)" og vælger den stylesheet som har det tal som er i newcolor.
Det som jeg skal have gjort.
2 billeder i min index blir _IKKE_ hentet gennem mine stylesheets men derimod med <img>. Dette billede skal jeg have ændret samtidig som når man vælger en ny stylesheet så den passer til det valgte tema.
Jeg prøver at tjekke først om <img> har filnavnet "left_arrow_alpha" fordi jeg har to billeder, et hvor den er gennemsigtig og ikke gennemsigtig. Den skal derfor finde ud om den er gennemsigtig eller ikke er, også skal den erstatte stien. Stien er "images/1/left_arrow_alpha.gif" som standard. Jeg skal have ændret /1/ til det nummer som den nye valgte stylesheet indeholder, altså "newcolor". Jeg bruger "thiscolor" til at tjekke det nuværende billedes sti.
Forstår du? :)
