Farbwechsel komplette Webseite

Janine17 · 21.12.2011

Hallo ihr Lieben,

ich möchte gerne bei oncklick einen kompletten wechsel von der farbigen zur grauen Seite und umgekehrt. Ich bin nicht so bewandert in JS, denke mir aber das man das mit onclick macht?!

Vlt. könnt ihr mir helfen.
Danke schon mal;-)

Doitsu · 21.12.2011

AW: Farbwechsel komplette Webseite

Na ja, du legst einfach nur eine 2. CSS-Datei an, bei dem Klick auf den Link aenderst du dann einfach den src vom link-Tag und bekommst dann den neuen Style.

Code:

<html>
<head>
<link src="css/style1.css" id="theme" />
<script type="text/javascript">
function switchTheme() {
  var link = document.getElementById('theme');
  if(link.src == 'css/style1.css') 
  {
    link.src = 'css/style2.css';
  }
  else
  {
    link.src = 'css/style1.css';
  }
}
</script>
</head>
<body>
<a href="javascript: void(0);" onclick="switchTheme();">Farbe aendern..</a>
</body>
</html>

So oder so aehnlich.. Muesste halt nur noch in einen Cookie gespeichert werden, welches Theme denn nun aktiv ist..

Jaelina · 21.12.2011

AW: Farbwechsel komplette Webseite

Ah, ein Mediengestalter Digital, der die aktuelle AP schreibt

Moev · 26.12.2011

AW: Farbwechsel komplette Webseite

Jaelina schrieb:
Ah, ein Mediengestalter Digital, der die aktuelle AP schreibt

Das habe ich mir auch gedacht

Du kannst es mit Js probieren, oder mit Sessions und Cookies

Hier mal nen gutes tutorial: http://alice-grafixx.de/PHP-MYSQL-Tutorial/Style-Switcher-56
Aber ich glaube für den zweck ist die JS version am besten.
Nachteil ist ja, dass die Seite beim neuladen wieder auf die normale Farbe springt.
(Brauchst du aber nun wahrscheinlich nicht mehr, ne? ;D)

Janine17 · 27.12.2011

AW: Farbwechsel komplette Webseite

Doch doch ich befasse mich noch mit dem Farbwechsel. Aber reicht wenn ich einfach sage das er dei Seite grau macht oder muss ich die Bilder dann auch alle umwandeln? Ich hab mal ne Funktion gefunden, da konnte man irgendwie alles einfach grau machen, allerdings finde ich die nicht mehr wieder

und ich hab noch nie mit JS gearbeitet:-D

Danke euch

ChrisvA · 27.12.2011

AW: Farbwechsel komplette Webseite

Falls auch die Bilder Grau sein sollen kommt eigentlich nur andere Bilder laden in Frage, es sein denn du Glaubst daran, dass alle deine Besucher Microsoft Fans sind und den iExplorer nutzen dann könntest du das auch mittels CSS machen:

PS: Habe hier gerade was interessantes Gefunden, was eigentlich genau dein Problem löst:
http://www.boogdesign.com/examples/svg/desaturate.html
Allerdings sind die CSS Attribute alles andere als die Norm, sondern nur Browserabhängige Implementierungen.

Moev · 29.12.2011

AW: Farbwechsel komplette Webseite

Man könnte auch mit CSS3 die Bilder grau machen.
http://html5advent2011.digitpaint.nl/16/index.html

Aber das ist halt nur die CSS3 lösung. Mit Javascript weiß ich auch nicht wirklich wie man das machen kann, habe dazu auch nichts gefunden.

Bei dem Link den ich oben gepostet habe ändert man halt nur die CSS Datei und nicht die Bilder. Da brauchst du dann halt 2 Style-Sheets.

Janine17 · 04.01.2012

AW: Farbwechsel komplette Webseite

Hallo Doitsu, ich hab mich nun doch nach ewigem hin und her für die css variante entschieden. Ich wollte aber nicht wie in deinem Beispiel farbe ändern sondern grau und farbe und der springt auf die jeweilige css. Nun schreibst du noch was von cookies. Kannst du mir das erklären, wie ich des mache?.-)

Meinst du sowas?

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca;
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

Also ich hab nun mir dieses angesehen:
http://www.alistapart.com/articles/alternate/

Da steht was von einer styleswitscher Datei. (ganz unten)Ich finde das allerdings zienlich umfangreich. Kann ich also das so einfach halten wie in deinem Bsp. oben mit meinen Vorstellung + den geposteten Code für diesen Cookie?