Hintergrundbild nach eigenem Geschmack einstellbar

#1 von wolf.andres , 13.08.2007 23:33

Hintergrundwechsel individuell einstellbar

Hier kommt ein Hintergrundwechsler, bei dem der Hintergrund manuell, nach eigenem Geschmack eingestellt werden kann.
Der Hintergrundwechsler funktioniert beim Internet Explorer, FireFox, Netscape und Opera ohne Komplikationen!!!
Das Hintergrundbild hält sich auch, wenn die Seite geschlossen wird. Über ein Cookie wird die Zeit der Speicherung bestimmt.
Mit Hilfe eines frei platzierten Button, lassen sich die Hintergründe durch anklicken auf "Hintergrundbild auswählen" einstellen.

Hier das komplette HTML-Script:

Die Haltezeit für das Hintergrundbild wird über den Wert "var exp=20" eingestellt und beträgt hier 20 Tage

Das JavaScript braucht nur zwischen <head> + </head> eingefügt werden

Im Forum befindet sich der "Header" unter "Admin > Template > [edit] > Obere Leiste"

Eintragungen sicherheitshalber in eine Textdatei abspeichern (z.B. "Obere Leiste.txt")

Der Body-Tag muß noch um den Eintrag des Anfang-Hintergrundbildes z.B.:
background="http://www.bilder-hochladen.net/files/1tys-1m.jpg" erweitern werden.

Die Hintergrundbilder können beliebig unter "backgs[X]" erweitert werden

Das Anfang-Hintergrundbildes im "body"(background="...") sollte mit backgs[0] identisch sein![/li9

Die Button-Leiste ist frei platzierbar:

Wichtig! Nach jedem Neueintrag von Bildern, alte "cookies" löschen!!!

 <HEAD>

<title>Hintergrundwechsel manuell einstellbar</title>

<script type="text/javascript">

/*Background Change Script w/cookie persistence

  © 2006 John Davenport Scheuer (jscheuer1)

  this credit must remain for legal use

  visit Dynamic Drive Help Forums (http://www.dynamicdrive.com/forums/) */

//Set expiration in days, use 0 for session only cookie

var exp=20;

//Set Background Images Array, use at least two Images.

//Do NOT use =, +, -, or spaces in path or filenames.

//For best results, set body's background to the first entry

var backgs=new Array;

backgs[0]="http://www.bilder-hochladen.net/files/1tys-1m.jpg";

backgs[1]="http://www.bilder-hochladen.net/files/big/1tys-5m.jpg";

backgs[2]="http://www.bilder-hochladen.net/files/big/1tys-5n.jpg";

backgs[3]="";



/////////No Editing Needed for rest of Script////////

function bgChange(){

if (backgs.length>2)

backgs.push([backgs.shift()]);

for (i = 0; i < backgs.length; i++)

if (document.body.background!==backgs[i]||document.body.style.backgroundImage.toLowerCase()!=='url('+backgs[i].toLowerCase()+')'){

document.body.style.backgroundImage='url('+backgs[i]+')'

break;

}

}



function get_cookie(Name) { 

var search = Name + "=";

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search);

if (offset != -1) { 

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length

returnvalue=unescape(document.cookie.substring(offset, end));

}

}

return returnvalue;

}



function onloadfunction(){

var acookiename="abgchange";

var acookievalue=get_cookie(acookiename);

if (acookievalue!=""){

backgs=eval(acookievalue)

document.body.style.backgroundImage='url('+backgs[0]+')';

}

}



function saveBgrnd(){

var abackgs='["';

for (i = 0; i < backgs.length; i++)

abackgs+=backgs[i]+'","'

abackgs=abackgs.substr(0,abackgs.length-2)+']';

var acookiename="abgchange";

var date = new Date();

date.setTime(date.getTime()+(exp*24*60*60*1000));

var expires = exp? "; expires="+date.toGMTString() : "";

var acookievalue=abackgs+expires+"; path=/";

document.cookie=acookiename+"="+acookievalue;

}



if ( typeof window.addEventListener != "undefined" )

    window.addEventListener( "load", onloadfunction, false );

else if ( typeof window.attachEvent != "undefined" ) {

    window.attachEvent( "onload", onloadfunction );

}

else {

    if ( window.onload != null ) {

        var oldOnload = window.onload;

        window.onload = function ( e ) {

            oldOnload( e );

            onloadfunction();

        }

    }

    else

        window.onload = onloadfunction;

}



window.onunload=saveBgrnd;



</script>

</HEAD>

<BODY marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" 

background="http://www.bilder-hochladen.net/files/1tys-1m.jpg">

<input type="button" value="Hintergrund wechseln" onClick="bgChange()">

</BODY>

</html>

Der Hintergrundwechsler in Aktion: http://www.future-andres.de/forum/Hinter...er_Manuell.html

Auch nachzulesen unter: http://www.dynamicdrive.com/forums/showthread.php?t=2714

Weitere Hintergrundwechsler in meinem Forum: http://104774.homepagemodules.de/t117f31...e-Homepage.html

Gruß
wolf.andres

#2 von Ulrike , 09.09.2007 19:48

Hallo wolf.andres,

tolle Sache mit den wechelnden Hintergrundbildern, ich hab's bei mir eingebaut und es klappt tadellos.
Nur den Button "Hintergrund wechseln" möchte ich so nicht, da möchte ich es nicht als Button, sondern als normaler Text-Link und dann plaziert zu den anderen in der Menüleiste, Ich bekomm's ohne Hilfe nicht hin.

Gruß, Ulrike

#3 von wolf.andres , 09.09.2007 22:06

Hintergrundbilder über die Menüleiste wechseln

Hallo Ulrike,

Du mußt folgenden Eintrag (Button) aus dem Template "Obere Leiste" entfernen:


<input type="button" value="Hintergrund wechseln" onClick="bgChange()">

Weiterhin zwei neue Eintragugen im Template "Obere Leiste" machen, für Login & Logout!

Login



 {{user_registered==true.start}}

*

    | <a href="#" onClick="bgChange()" class="tarea">Hintergrund wechseln</a>

*

 {{geomap==true.start}}

Logout



 {{user_registered==false.start}}

*

    | <a href="#" onClick="bgChange()" class="tarea">Hintergrund wechseln</a>

*

 {{user_registered==false.end}}

Bis dann und viel Spass
wolf.andres

#4 von Ulrike , 13.09.2007 18:30

Hallo wolf.andres,

ich danke Dir, ich hab es dann noch hinbekommen das beim überfahren mit der Mous nur der Unterstrich des Text-Link farbig wird.

Hier wird der komplette Text-Link samt Unterstrich farbig
| <a href="#" onClick="bgChange()" class="tarea">Hintergrund wechseln</a>

----------------------------------------------------------------------------------

Mit diesem Befehl wird nur der Unterstrich farbig
| <a href="#" onClick="bgChange()"><span class="tarea">Hintergrund wechseln</span></a>

Gruß, Ulrike

#5 von antagon , 12.02.2008 13:41

Hallo wolf.andres

Ich hab das Script ausprobiert (auch in der oberen Navileiste) und es funktioniert so weit gut. Nur ein Problem hab ich. Habe ein eigenes Hintergrundbild genommen und drei Farbvariationen davon auf meinen Webspace geladen, und die Links im Script und im Body-Tag jeweils angepasst.

Etwa 1/2 Sekunde funktioniert es, wenn ich den Cache vorher geleert hab, dann kommen trotzdem die Bilder aus dem Beispielscript hier... Ich kann mir nicht erklären woran das liegt, die URLs der Hintergrundbilder von hier kommen in dem angepassten Script gar nicht mehr vor...

Woran kann das liegen?
Und gibt es da eine Lösung?

http://108971.homepagemodules.de/

lg
Simon

...edit: nachdem es im Internetexplorer funktionierte hab ich im Firefox mal die Scripts deaktiviert und wieder aktiviert... Jetzt funzt es. Danke dafür !

#6 von wolf.andres , 13.02.2008 21:57

Hallo Simon,
habe Deine Seite mit dem IE7 und FF ausprobiert.
Funktioniert bei mir tadellos. Selbst beim wiederholten Seitenaufbau bleibt das Hintergrundbild erhalten.

Wenn ich den Quelltext aufrufe und ihn mir ansehe, ist alles i.O.

Du muß auch die Cookies löschen!

Weitere Möglichkeit:
Rufe Du Doch bitte den Quelltext auf und speichere ihn unter "Datei anhängen" ab.
Vielleicht ist der aufschlußreicher!

Gruß
Wolfgang

#7 von green , 14.02.2008 00:35

...mal 'ne vielleicht dumme Frage: müssen Variablenwerte in Javascript nicht mit Semikolon geschlossen werden?

In Antwort auf:
//Set expiration in days, use 0 for session only cookie
var exp=60;
//Set Background Images Array, use at least two Images.
//Do NOT use =, +, -, or spaces in path or filenames.
//For best results, set body's background to the first entry
var backgs=new Array;
backgs[0]="http://home.arcor.de/saimen83/bgs/lightyellow2.gif";
backgs[1]="http://home.arcor.de/saimen83/bgs/lightorange2.gif";
backgs[2]="http://home.arcor.de/saimen83/bgs/lightred2.gif";
backgs[3]="http://home.arcor.de/saimen83/bgs/lightblue2.gif";

...meine ich.

#8 von BOo°m , 14.02.2008 10:18

Dürfte die gute alte Fehlertoleranz überflüssig machen.......

#9 von wolf.andres , 14.02.2008 19:02

Hallo,
da war wohl die Semikolon-Taste kaputt!
Habe die Semikolons nachgetragen.

Was mir allerdings aufgefallen ist, dass beim erneuten Seitenaufruf beim "Opera" das Hintergrundbild nicht gehalten wird.
Beim IE7,FF und NS funktioniert es tadellos!?

Weiß einer hier weiter?

Gruß
wolf.andres

Beiträge:	99
Registriert am:	04.02.2007

Beiträge:	19
Registriert am:	10.09.2006

Beiträge:	99
Registriert am:	04.02.2007

Beiträge:	19
Registriert am:	10.09.2006

Beiträge:	99
Registriert am:	04.02.2007

Hintergrundbild nach eigenem Geschmack einstellbar

Hintergrundbild nach eigenem Geschmack einstellbar

RE: Hintergrundbild nach eigenem Geschmack einstellbar

RE: Hintergrundbild nach eigenem Geschmack einstellbar

RE: Hintergrundbild nach eigenem Geschmack einstellbar

RE: Hintergrundbild nach eigenem Geschmack einstellbar

RE: Hintergrundbild nach eigenem Geschmack einstellbar

RE: Hintergrundbild nach eigenem Geschmack einstellbar

RE: Hintergrundbild nach eigenem Geschmack einstellbar

RE: Hintergrundbild nach eigenem Geschmack einstellbar