Hintergrundbild verändern (Js + Datenbank)

[Screentzz]

Hallo Js'ler,

leider bin ich ein absoluter Neuling im Umgang mit Javascript.

Ich möchte, dass man auf einen Div Container klicken kann und sich danach der Hintergrund bzw. das Hintergrundbild ändert.
Soweit funktioniert auch alles. Nun würde ich das ganze gerne mit einer Datenbank verbinden.
D.h. ich möchte es vermeiden immer " setOnclick("bg3_preview", "bg5.jpg"); " und die dazu gehörigen Div Container per Hand in das Script einzutragen, dies soll dann mit einem PHP Formular funktionieren.

Mein Js Skript

window.onload = function(){
    var lastClick = false;
    function setOnclick(id, image){
        var c = document.getElementById(id);
        c.onclick = function(){
            if (lastClick){
                lastClick.innerHTML = "Preview";
            }
            if (this !== lastClick){
                document.body.style.background = "#000 url(/images/" + image + ") no-repeat";
                document.body.style.backgroundSize = "100%";
                this.innerHTML = "   Stopp   ";
                lastClick = this;
            }
            else {
                document.body.style.background="#000 url(/images/bg4.jpg) no-repeat";
                document.body.style.backgroundSize = "100%";
                lastClick = false;
            }
        }
    }
    setOnclick("bg1_preview", "bg.jpg");
    setOnclick("bg2_preview", "bg5.jpg");
    setOnclick("bg3_preview", "bg5.jpg");
}

Die Div Container

#bg1 {
    background-image:url(images/previewshort/bg1.png);
    width: 500px;;
    height: 150px;
    margin: 0px auto;
    text-align: center;
    border: 1px solid #999999;
}

#bg1_preview {
    background-image:url(images/preview.png);
    background-repeat: repeat-x;
    color: #b0b0b0;
    padding: 20px 50px 20px 50px;
    cursor: pointer;
    font-family: Verdana;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

    <div id="bg1">
        <span id="bg1_preview">Preview</span>
    </div>

Leider weiß ich nicht wie man da Anfängt. PHP und co. verstehe ich noch aber wie das dann mit js funktioniert weiß ich auch nicht.

Ich hätte vielleicht ne Idee wie das theoretisch gehen könnte, doch wie das dann gecodet wird bleibt mir schleierhaft.


Ich hoffe ihr versteht mein Problem und könnt mir helfen. Bin mir auch nicht ganz sicher, ob ich hier im richtigen Bereich bin.

 

[Tronjer]

Zuerst musst du das Bild aus der Datenbank ausgeben und in einer Variablen speichern.

PHP:

$foo = //Bildausgabe

Anschließend benötigst du einen Selektor (button, etc.), für den Eventhandler und rufst dort die PHP-Variable auf. Ich würde das mit jQuery machen.

JavaScript:

$('button').click(function() {
    $('element').css('background', '<? echo foo; ?>');
});

 

[Screentzz]

Hmm bekomm es leider nicht hin. Die Daten bzw. das Hintergrundbild und der Previewbanner werden in Variablen gespeichert. Soweit auch kein Problem. Doch stehe ich mit Js also mit Jquery auf dem Schlauch. Wäre sehr nett wenn mir da einer weiter helfen kann.

Sollte so ähnlich sein, wie hier: Subtle Patterns | Free textures for your next web project

 

[Screentzz]

Würde mich auch über einen kleinen Stupser in die richtitge Richtung freuen.

 

[Tronjer]

- schreibe den Inhalt der PHP-Variablen in eine JavaScript-Variable und kontrolliere das mit einem alert() oder console.log().
- schaue in der offiziellen jQuery-Doku nach den Funktionen click(), css() und addClass(). Dafür gibt es auf den jeweiligen Unterseiten nachvollziehbare Beispiele.