css veranderen

Status
Niet open voor verdere reacties.
xvilo

xvilo

Gebruiker
Lid geworden
14 dec 2008
Berichten
492
hoi,
ik ben opzoek naar een scriptje waar mee ik mijn css kan veranderen dus:

ik heb een knop en als je er op klik activeert hij CSS 2 en als je er weer op klikt dan zet hij hem weer standaart naar CSS 1.

maar hij moet altijd als je de pagina opnieuw laad CSS 1 gebruiken
 
Das toch niet zo moeilijk?

if(css1 is geselecteerd){
hier css1
}

if(css2 is geselecteerd){
hier css2
}
 
ja zeker dat is wel moeilijk ik snap niet helemaal goed hoe ik de code moet toepassen...:P

ik heb deze knop:
HTML: 
 <div class="light"><a href="....."><img src="img/on.png" width="64" height="57" alt="licht aan" longdesc="http://www.semschilder.nl" border="0"/></a></div>
 
Jaye, Javascript magie! :D -_-

Ik neem aan dat je een <link> met een stijl hebt. Geef deze een ID, bijvoorbeeld 'stijlzzz'

Dan, zoiets:
[JS]var stijl1 = true;

function switchStijl()
{
document.getElementById('stijlzzz').setAttribute('href', (stijl1 === true ? 'stijl1.css' : 'stijl2.css'));
stijl1 = !stijl1;
}[/JS]en dan je button een onclick naar switchStijl() geven.
 
het werkt niet helemaal goed, dit is de code die ik gebruik:
HTML: 
   <div class="light">
                <IMG SRC="img/on.png" name="pswd" width="64"  border="0" usemap="#pswd" style="cursor:hand"     onclick="switchStijl()">
<map name="pswd">
    <area shape="default" coords="0,0,0,0" href="javascript:switchStijl()">
</map>

                <script type="text/javascript">
var stijl1 = true;
 
function switchStijl()
{
   document.getElementById('licht').setAttribute('href', (stijl1 === true ? 'l.css' : 'd.css'));
   stijl1 = !stijl1;
}
</script>

</div>

je kunt een online voorbeeld zien op hier de grote witte aan/uit knop recht boven in de header zou het moeten zijn alleen doet hij het niet zoals ik hem nu heb
 
gelukt..
ik ben er uit gekomen naar 5 uur googlen en ongeveer 25 scripts geprobeerd maar nu:

1. download dit styleswitch.js en sla het op
2. zet deze code direct onder je stylesheet link
HTML: 
<!--This script should appear below your LINK stylesheet tags -->

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

/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
zet daarna je 2e en/of derde css er bij
bijvoorbeeld:
HTML: 
<head>
<link rel="stylesheet" type="text/css" href="default.css"  />
<link rel="alternate stylesheet" type="text/css"  media="screen" title="blue-theme" href="custom.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"  title="brown-theme" href="custom2.css" />

<script src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library  (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s  more
***********************************************/
</script>
</head>
hier onder zijn verschillende manieren om het scriptje op te roepen:

radio buttons:
HTML: 
<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle(this.value,  60)">Default style<br />
<input type="radio" name="choice" value="blue-theme"  onClick="chooseStyle(this.value, 60)">Blue Theme<br />
<input type="radio" name="choice" value="brown-theme"  onClick="chooseStyle(this.value, 60)">Brown Theme
</form>
drop down menu:
HTML: 
<form id="switchform">
<select name="switchcontrol" size="1"  onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="none" selected="selected">Default style</option>
<option value="blue-theme">Blue Theme</option>
<option value="brown-theme">Brown Theme</option>
</select>
</form>
normale links:
HTML: 
<a href="javascript:chooseStyle('none', 60)"  checked="checked">Default style</a>
<a href="javascript:chooseStyle('blue-theme', 60)">Blue theme</a>
<a href="javascript:chooseStyle('brown-theme', 60)">Brown theme</a>
als een extraatje het optimaliseren van de radio buttons:
als je bezoeker de pagina herlaad of later weer terug komt gaat hij weer op standaart staan wat in sommige gevallen niet handig is, om dit te kunnen voorkomen moet je het zo veranderen:
HTML: 
<script type="text/javascript"> window.onload=function(){ var formref=document.getElementById("switchform") indicateSelected(formref.choice) } </script>
als je wilt dat het scipt automatisch altijd een andere kiest kun je dit gebruiken:
kun je in het .JS bestandje deze regel veranden:
HTML: 
var manual_or_random="random"  //"manual" or "random"
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan