dynamisches Farbdesign

moserartz · 21 Dezember 2010

Hallo Miteinander

Ich möchte gerne, dass man bei meiner Homepage oben rechts zwischen drei Farben wählen kann und das Design in der gewünschten Farbe angezeigt wird. Die Grafiken und Stylesheets habe ich schon in allen drei Farben erstellt.

Meinen Suchversüche brachten keinen Erfolg, weil ich keine Ahnung habe wie diese Funktion heisst. Ich habe nach Design mit verschiedenen Farben, Multcolor-Designs etc. gesucht.

Was Muss geändert werden?

Die Farbe spielt eine Rolle beim Header. Dieser ist per CSS eingebunden.

Beim Linkmenu gibt es einen Rollover-Effekt bei dem der Menueintrag in dieser Farbe unterstrichen wird. Dieser Effekt habe ich mit zwei Grafiken gemacht, weil die Schriftart nicht verfügbar ist und die Unterstreichung einen Schein nach aussen hat.

Die Textfarbe im Contentbereich soll sich auch ändern.
:arrow:
Kann mir jemand dabei helfen? Wäre super nett.

Gruss und Danke

moserartz

vitus37 · 21 Dezember 2010

Begriffe "css style switcher" hätten dir wahrscheinlich geholfen.
Eine Anleitung eines Mitglieds aus dem Forum findest du hier: CSS-Styleswitcher

Gruß

moserartz · 21 Dezember 2010

hallo Vitus

Genau dieser Begriff fehlte mir

vielen Dank

moserartz · 23 Dezember 2010

ich habe dein Tutorial probiert, jedoch zu keiner Lösung gekommen. Ich habe weiter gesucht und bin auf diese Seite gestossen: Style-Switcher mit JavaScript - Webseiten professionell Wiki

Meine Frage:

Wie kann ich hier das passende cookie erstellen?

Gruss und danke

alogheo · 23 Dezember 2010

Code:

document.cookie = "style=" + document.getElementById("style").href + "; max.age=" + (60*60*24*365) + ";";

moserartz · 23 Dezember 2010

DANKE!

Diesen Code 1 zu 1 in das HTML Dokument einbinden?

Gruss

alogheo · 23 Dezember 2010

kommt mit in die if-Anweisungen der change_style()-Funktion

Aufgerufen werden kann dann der cookie folgendermaßen (in eine funktion packen, die nach dem laden der seite ausgeführt wird):

Code:

var alleCookies = document.cookie;

var pos = alleCookies.indexOf("style=");

if(pos != 1)
{
  var start = pos + 6;
  var ende = alleCookies.indexOf(";", start);
  if (ende == -1)  ende = alleCookies.length;
  var style = alleCookies.substring(start,ende);
  style = decodeURIComponent(style);
}
else { /*standart-design wählen*/ }

nach "JavaScript - Das umfassende Referenzwerk" von David Flanagan, Kapitel 19; ist sehr zu empfehlen

moserartz · 23 Dezember 2010

Tut mit wirklich leid...Ich kann vieles aber ich habe keine Ahnung von Cookies

Wenn du sagst es kommt auf die if-Anweisung an, binde ich doch einmal den HTML Code ein.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<meta http-equiv="Content-Type"  content="text/html; charset=utf-8" />
<title>MoserArtz Webdesign</title>
<link id="style" type="text/css" rel="stylesheet" href="css/style-1.css">
<script type="text/javascript">
function change_style(n) {
  if(n == 1) {
     document.getElementById('style').href ="css/style-1.css";
     document.getElementById('heading').innerHTML = "Style 1";
     return; 
  }
  if(n == 2) {
     document.getElementById('style').href ="css/style-3.css";
     document.getElementById('heading').innerHTML = "Style 2";
     return;
  }
  if(n == 3) {
     document.getElementById('style').href ="css/style-2.css";
     document.getElementById('heading').innerHTML = "Style 3";
     return;
  }
}
</script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body class="background" onload="MM_preloadImages('Images/Aufbau/linkmenu_gruen_01.jpg','Images/Aufbau/linkmenu_gruen_02.jpg','Images/Aufbau/linkmenu_gruen_03.jpg','Images/Aufbau/linkmenu_gruen_04.jpg')">
<!--Auswahl beginnt-->
	<div class="styleauswahl">
   <img src="Images/Aufbau/auswahl.jpg" width="60" height="20" border="0" usemap="#Map" />
   <map name="Map" id="Map">
     <area shape="rect" coords="-10,-8,19,21" href="javascript:change_style(3)">
     <area shape="rect" coords="18,-2,40,21" href="javascript:change_style(1)">
     <area shape="rect" coords="39,-3,64,21" href="javascript:change_style(2)">
   </map>
    </div>
<!--Auswahl endet-->
<!--Banner beginnt-->
	<div class="header">
</div>
<!--Banner endet-->
<!--Linkmenu beginnt-->
	<div class="linkmenu">
		<img src="Images/Aufbau/linkmenu_gruen_01.jpg" />
        <a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Angebot','','Images/Aufbau/linkmenu_gruen_02.jpg',1)"><img src="Images/Aufbau/linkmenu_passiv_02.jpg" name="Angebot" width="186" height="50" border="0" id="Angebot" /></a>
        <a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Referenzen','','Images/Aufbau/linkmenu_gruen_03.jpg',1)"><img src="Images/Aufbau/linkmenu_passiv_03.jpg" name="Referenzen" width="218" height="50" border="0" id="Referenzen" /></a>
        <a href="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Kontakt','','Images/Aufbau/linkmenu_gruen_04.jpg',1)"><img src="Images/Aufbau/linkmenu_passiv_04.jpg" name="Kontakt" width="190" height="50" border="0" id="Kontakt" /></a>
   	</div>
<!--Linkmenu endet-->
<!--Content Beginnt-->
	<div class="content">
    	<div class="ueberschrift_01">
        	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
        </div>
    </div>
<!--Content endet-->
<!--Feater Anfang-->
	<div class="feater">
Letzte Aktalisierung:&nbsp;<!-- #BeginDate format:fcGe1m -->Donnerstag, 23.12.2010  19:39<!-- #EndDate -->&nbsp;&nbsp;|&nbsp;&nbsp;Impressum&nbsp;&nbsp;|&nbsp;&nbsp;Webmaster
</body>
</html>

alogheo · 23 Dezember 2010

Code:

<script type="text/javascript">
function change_style(n) {
  if(n == 1) {
     document.getElementById('style').href ="css/style-1.css";
     document.getElementById('heading').innerHTML = "Style 1";
     document.cookie = "style=" + document.getElementById("style").href + "; max.age=" + (60*60*24*365) + ";";
     return; 
  }
  if(n == 2) {
     document.getElementById('style').href ="css/style-3.css";
     document.getElementById('heading').innerHTML = "Style 2";
     document.cookie = "style=" + document.getElementById("style").href + "; max.age=" + (60*60*24*365) + ";";
     return;
  }
  if(n == 3) {
     document.getElementById('style').href ="css/style-2.css";
     document.getElementById('heading').innerHTML = "Style 3";
     document.cookie = "style=" + document.getElementById("style").href + "; max.age=" + (60*60*24*365) + ";";
     return;
  }
}

function setStyle()
{
  var alleCookies = document.cookie;

  var pos = alleCookies.indexOf("style=");

  if(pos != 1)
  {
    var start = pos + 6;
    var ende = alleCookies.indexOf(";", start);
    if (ende == -1)  ende = alleCookies.length;
    var style = alleCookies.substring(start,ende);
    style = decodeURIComponent(style);

    document.getElementById("style").href = style;
  }
}
</script>
<!--
...
-->
<body onload="setStyle();">

müsste so funktionieren

moserartz · 23 Dezember 2010

Danke, aber Leider ist es jetzt so, dass beim drücken von F5 und beim normalen eingeben der URL das Stylesheet nicht geladen wird.

Die Adresse lautet: www.webdesign.moser-artz.com

alogheo · 23 Dezember 2010

kleiner fehler:

nicht

Code:

if(pos != 1)

sondern

Code:

if(pos != -1)

peinlich, peinlich

moserartz · 23 Dezember 2010

Nichts ist Peinlich. Ohne Dich wäre ich bald verzweifelt -->Danke

Peinlich ist eher dass ich Webdesign anbiete und keinen Ahnung von Cookies habe!

Gruss und nochmals Danke

moserartz

dynamisches Farbdesign

moserartz

Neues Mitglied

vitus37

Senior HTML'ler

moserartz

Neues Mitglied

moserartz

Neues Mitglied

alogheo

Mitglied

moserartz

Neues Mitglied

alogheo

Mitglied

moserartz

Neues Mitglied

alogheo

Mitglied

moserartz

Neues Mitglied

alogheo

Mitglied

moserartz

Neues Mitglied

Neueste Beiträge