Hintergrundbild zum Austauschen

[Josh]

Hallo,

ich erstelle eine Website, 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, sondern nur das bestehende Hintergrundbild gegen eines der anderen ausgetauscht werden.

Ich habe nur noch keine Möglichkeit gefunden, wie.
Habt Ihr da eine Idee?

Vielen Dank für die Hilfe!

[dey]

Hallo,

Ich habe nur noch keine Möglichkeit gefunden, wie.
Habt Ihr da eine Idee?

Vermutlich geht das nur mit JS (und CSS):
getElementbyID("xxx").className="anderesbild-x"

bydey

[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