In diesem Tutorial lernt ihr, wie ihr mit Hilfe von Javascript den Hintergrund eines Div-Elements wechseln könnt.

In diesem Beispiel könnt ihr euch vorab schonmal anschauen, worauf wir hinaus wollen: Klick!

Nehmen wir also an wir haben in unserem Quellcode einen beliebigen Div-Container, der seine Hintergrundfarbe beim Klicken auf eines der Worte darunter wechseln soll.

HTML:
<div id="Container">Text</div> <br/>
Weiß | Blau | Rot

CSS:
#Container
{
width:100px;
background-color: #FFFFFF;
}

Unsere Hintergrundfarbe ist nun weiß. Wir bereiten die Wörter nun so vor, dass sie "onclick" also beim Anklicken eine Javascript-Funktion aufrufen, die wir im Anschluss noch schreiben werden.

<div id="Container">Text</div> <br/>
<u onclick="wechsel(1)">Weiß</u> |
<u onclick="wechsel(2)">Blau</u> |
<u onclick="wechsel(3)">Rot</u>

Die Wörter sind nun unterstrichen und wenn man sie anklickt, wird die Funktion "wechsel" aufgerufen. Dabei wird jeweils eine Variable übergeben ("weiss", "rot" und "blau"), die wir später in unserer Funktion verarbeiten werden.

Nun schreiben wir nun unsere Javascript Funktion, namens "wechsel".


<script type="text/javascript"> 
function wechsel(farbe) 
{ 
    if(farbe==1) 
    { 
       
document.getElementById('Container').style.backgroundColor='#ffffff';

    } 
     
    if(farbe==2) 
    { 
       
document.getElementById('Container').style.backgroundColor='#0000ff';

    } 
     
    if(farbe==3) 
    { 
       
document.getElementById('Container').style.backgroundColor='#ff0000';

    } 
} 
</script>



Für "farbe" wird die jeweilige Variable eingesetzt, die beim onclick festgelegt wurde. Je nachdem welche Variable eingesetzt wurde, wird eine andere Aktion ausgeführt. Ist z.B. Rot angeklickt worden, wird mit Hilfe von "getElementById" unser Div-Element "Container" aufgerufen, dass wir bereits definiert haben. Mit "style.backgroundColor='#ff0000'" wird dann die Hintergrundfarbe auf rot gesetzt.

Natürlich kann man statt "onclick" auch "onmouseover" verwenden. Dann würde sich die Hintergrundfarbe ändern, wenn man mit der Maus über das jeweilige Wort fährt.

Wollen nun auf Klick das Hintergrundbild wechseln, schaut das Ganze ein bisschen anders aus.

<div id="Container">Text</div>
<u onclick="wechsel(1)">Bild</u> |
<u onclick="wechsel(2)">Kein Bild</u>


<script type="text/javascript">
function wechsel(bild)
{
    if(bild==1)
    {
        document.getElementById('Container').style.backgroundImage='url(images/deinbild.jpg)';
    }
    
    if(bild==2)
    {
        document.getElementById('Container').style.backgroundImage='none';
    }
}
</script>



Klickt man nun auf "Bild" erscheint als Hintergrundgrafik des Containers das gewünschte Bild (images/deinbild.jpg), klickt man auf "Kein Bild" gibt es keine Hintergrundgrafik mehr. Man kann auch zwischen mehreren Hintergrundbildern wechseln, das Prinzip ist ja nun hoffentlich klar. ;)

Und schon ist unser Hintergrundwechsel fertig!