Per Klick(/Script?) Hintergrundbild ändern.

[RenardPale]

Ersteinmal "Hallo" ins Forum :-)

Falls diese Frage nun im falschen bereich ist, entschuldige Ich mich und bitte darum sie zu verschieben - Aber über die Suche habe ich nichts gefunden und da Ich eben nicht weiß, auf welche Art man dies nun am besten realisieren könnte (JS halte Ich aufgrund von möglicher Deaktivierung seitens des Besucherbrowsers für suboptimal), habe Ich sie einfach allgemein in "HTML" gepackt..

Bin gerade dabei ein neues Webseitenprojekt anzufertigen. Da sie aber ein wenig vorlauf bekommt, erstelle Ich gerade zuerst eine Preview, die aus einer einzigen Seite (=index) besteht. Diese soll aber bereits ein paar der (Kunst-)inhalte darstellen. So wollte Ich nun einrichten, dass sich das Hintergrundbild der Webseite (eingebunden über CSS-Regel (body) und bildschirmfüllend/skaliert) per Klick auf einen Button ändert. Finde diese Idee nett, da so keine neue Seite aufgeworfen werden muss und das einen weichen/eleganten Wechsel ergäbe.

HTML und CSS waren soweit nie ein großes Problem, nur bei dieser vermeintlich einfach Idee habe Ich keine Ahnung wie Ich das (möglichst ohne JS) realisieren kann.

Die (Preview-)Webseite enthält keinerlei Tabellen o.ä., nur das jetzige Hintergrundbild über CSS und zukünftig dann eben einen Button (á la "Weiter", so dass man in einer Schleife den Hintergrund durchwechsel kann).


Ich hoffe jemand kann mir helfen, danke fürs lesen :-)

 

[Arcsinh]

Mit PHP könnte das noch funktionieren, aber dann müsste die Seite neu geladen werden.

 

[RenardPale]

Hi!

Seite neue laden ist ja eigentlich genau das was ich in diesem Fall nicht möchte. Dann könnte Ich auch einfach links zu verschiedenen Seiten machen, bei so wenig Code kein großer Unterschied.

Aber danke :)

 

[EndOfGreen]

Dann wird dir aber wohl nichts anderes als JS übrig bleiben. Auch wenn es der Benutzer ausgeschaltet hat, ist es ja nicht so schlimm, da es nur eine kleine Spielerei ist. ;)

Hier der Code dafür:

onclick="this.style.backgroundImage = 'url(bild1.jpg)';"

 

[RenardPale]

Okay, dann werd ich das voererst mal so machen.

 

[Timmer]

Und bitte das nächste Mal die Suchfunktion benutzen, dieses Thema wurde vor nichtmal 2 Wochen schonmal geklärt...

 

[Arcsinh]

Oder du hast im Verzeichnis z.B. 10 Bilder, die folgendermaßen heißen 1.jpg, 2.jpg, 3.jpg, ... , 10.jpg:

document.getElementById("meinButton").onclick = function() {
    var rand = (function(start, end) { 
        return start + Math.floor(Math.random()*(end-start+1)); 
    })(1, 10);
    document.getElementsByTagName("body")[0].style.backgroundImage = "url(" + rand + ".jpg)";
};

Nicht getestet, aber dürfte funktionieren.