mit CSS Hintergründe dynamisch auswählen

W0lf

Hallo,

ich hab leider das Tut nicht mehr gefunden, die dieses Thema behandelte...

Wie erreiche ich es denn dem Surfer die Option zu bieten den Hintergrund meiner Website selbst auszusuchen? Ich denke da an einen Knopf mit dem er zwischen zwei Hintergrundbildern hin- und herswitchen kann. Reicht mir dafür einfach CSS, oder muss man da mit Java arbeiten.
Falls zweiteres zutrifft, wäre ich für nen Code-Schnipsel oder nen Link sehr dankbar..

Vernochan

Also wenns ohne Reload gehen soll muss javascript her.
Mit Reload musst du das CSS so anpasen, das bei einer ausgewählten Option (wahrscheinlich dann in einer Session gespeichert) DIESES Bild genommen wird und bei anderer Option JENES bild.

Mit javascript kannst du das Hintergrundbild folgendermaßen ändern:

document.body.style.backgroundImage='url(anderesBild.Gif)';

unter php wäre es dann wohl sowas wie

<style>
...
...
body{
  background-image:url(<?php
    switch ($_SESSION[background]){
      case 1: echo"pics/bg1.jpg"; break;
      case 2: echo"pics/bg2.jpg"; break;
      default:echo"pics/bgdef.jpg"; break;
    }
     ?>);
}
...
...
</style>

W0lf

ok, danke schonmal.

Ist mir fast unangenehm, aber wie mache ich das denn genau, wenn das ganze nun beim drücken eines Buttons geschehen soll?

So, OnButton.changepic oder so ähnlich

Vernochan

<input type="button" onClick="document.body.style.backgroundImage='url(bg2.jpg)';">

W0lf

Danke schön,

meine letzte Frage wäre jetzt nur noch, wie ich beim wiederholtem drücken den Buttons zu meinem alten Hintergrund wieder komme??

Danke schön

bzw. klappt noch nicht. Ich glaube, ich muss mein jetziges Hintergrundbild wahrscheinlich auch mit Java einbinden, oder? Wie mach ich denn das am besten?

Vernochan

Schau und lerne

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<TITLE>blah</TITLE>
<script language="JavaScript">
<!--
var bg=1;

function preloadImages() {
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=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 swap_bg_image(){
  if ( bg == 1){
    document.body.style.backgroundImage='url(bild2.gif)';
    bg=0;
  }
  else if ( bg == 0){
    document.body.style.backgroundImage='url(bild1.jpg)';
    bg=1;
  }
}
//-->
</script>

</HEAD>
<body style="padding:0px; margin:0px; background-image:url(bild1.jpg);" onLoad="preloadImages('bild2.gif')">
<input Value="ChangeBG" type="button" onClick="swap_bg_image();" id="blah">
</body></HTML>

Mit Sicherheit noch weit vom Optimum entfernt aber auf die schnelle sollte die Inspiration reichen.

W0lf

Und wandre ich durchs finstre Tal....
Da plötzlich ein Licht am Ende des Tunnels.

Vielen Dank, ich denke, damit kann ich arbeiten

Vernochan

Freut mich

Warum wird meine signatur ncih angezeigt o_O
nevermind..
überlesen, das max 3 zeilen erlaubt sind ._. (sind mir 2 zu wenig ;))
und nu kann ich den hacken setzen.. ^^