Hintergrundbild zum Austauschen

[Gunnar Bittersmann]

Hello out there!

bei der ich dem Benutzer ermögllichen möchte, aus 5 Hintergrundbildern zu wählen, indem er auf einen Link auf der Seite klickt. Nach Möglichkeit sollte sich dadurch keine neue Seite öffnen,

Dann solltest du dafür keinen Link verwenden, da Nutzer es gewöhnt sind, dass Links zu anderen Seiten mit anderen Inhalten führen. Für Aktionen auf einer Webseite ist der Nutzer Buttons gewöhnt. Hier wären auch Radiobuttons oder eine Auswahlliste angebracht.

sondern nur das bestehende Hintergrundbild gegen eines der anderen ausgetauscht werden.

<ul id="background">  
  <li><input type="radio" name="background" value="foo" id="foo" onclick="[code lang=javascript]document.body.style.backgroundImage = 'url(foo)';
~~~" /><label for="foo">foo</label></li>  
  <li><input type="radio" name="background" value="bar" id="bar" onclick="`document.body.style.backgroundImage = 'url(bar)';`{:.language-javascript}" /><label for="bar">bar</label></li>  
</ul>[/code]  
  
Mit Auswahllisten entsprechend. Die Eventhandler können statt im HTML verstreut auch zentral definiert werden:  
  
~~~html
<script type="text/javascript">  
[code lang=javascript]  window.onload = function() {  
    document.getElementById("foo").onclick = function() {  
      document.body.style.backgroundImage = 'url(foo)';  
    };  
    document.getElementById("bar").onclick = function() {  
      document.body.style.backgroundImage = 'url(bar)';  
    };  
  };

</script>[/code]

Soll das auch ohne JavaScript laufen, steckst du das in ein Formular, siehst einen Submit-Button vor (den du mit JavaScript unsichtbar machst), und lässt den Server je nach Nutzereingabe eine neue Ressource ausliefern.

See ya up the road,
Gunnar