Internet Forum / Hilfen für Einsteiger in HPM Foren

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:
  • <input type="button" value="Hintergrund wechseln" onClick="bgChange()">


  • 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




    Forum
    Homepage

     
    wolf.andres
    Beiträge: 99
    Registriert am: 04.02.2007

    zuletzt bearbeitet 14.02.2008 | Top

    RE: Hintergrundbild nach eigenem Geschmack einstellbar

    #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


    Wer später bremst fährt länger schnell !!!

    Ulrike  
    Ulrike
    Beiträge: 19
    Registriert am: 10.09.2006


    RE: Hintergrundbild nach eigenem Geschmack einstellbar

    #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




    Forum
    Homepage

     
    wolf.andres
    Beiträge: 99
    Registriert am: 04.02.2007

    zuletzt bearbeitet 10.09.2007 | Top

    RE: Hintergrundbild nach eigenem Geschmack einstellbar

    #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


    Wer später bremst fährt länger schnell !!!

    Ulrike  
    Ulrike
    Beiträge: 19
    Registriert am: 10.09.2006


    RE: Hintergrundbild nach eigenem Geschmack einstellbar

    #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 !

    antagon  
    antagon
    Beiträge: 1
    Registriert am: 12.02.2008

    zuletzt bearbeitet 12.02.2008 | Top

    RE: Hintergrundbild nach eigenem Geschmack einstellbar

    #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




    Forum
    Homepage

     
    wolf.andres
    Beiträge: 99
    Registriert am: 04.02.2007

    zuletzt bearbeitet 13.02.2008 | Top

    RE: Hintergrundbild nach eigenem Geschmack einstellbar

    #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.


    Greenbonoboland
    Guitars..

     
    green
    Beiträge: 32
    Registriert am: 23.01.2008

    zuletzt bearbeitet 14.02.2008 | Top

    RE: Hintergrundbild nach eigenem Geschmack einstellbar

    #8 von BOo°m , 14.02.2008 10:18

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



     
    BOo°m
    Administrator
    Beiträge: 1.991
    Registriert am: 27.11.2005


    RE: Hintergrundbild nach eigenem Geschmack einstellbar

    #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




    Forum
    Homepage

     
    wolf.andres
    Beiträge: 99
    Registriert am: 04.02.2007

    zuletzt bearbeitet 14.02.2008 | Top

       

    Beiträge-Suchen-Button unter dem Avatar
    Beiträge-Suchen-Button unter dem Avatar





    Powered by Forum Hosting  
    Xobor Forum Software von Xobor
    Einfach ein eigenes Forum erstellen