nicht angemeldet
Hintergrundbild soll bei Mausklick wechseln
Der MartinHi,
ich möchte für meine Homepage eine Hintergrundgrafik einrichten, die sich beim Klicken auf einen Link verändert bzw. eine andere Bilddatei geöfnet wird.
Am besten wäre es, wenn ihr mir einen Code in html oder JacaScript aufschreiben könntet (Von php und so verstehe ich noch nicht so viel...).
Auf der folgenden Seite wurde dieses Spiel getrieben (Zwar nur mit Hintergrundfarben; aber ich denke, dann muss es auch mit Grafiken gehen):
(Hier klicken)
Schonmal im Voraus ein fettes DANKE für alle Antworten,
NikBet
-
Außer mir wird hier keiner so nett sein und für dich was programmieren.
Mein Beispiel ist in JavaScript umgesetzt.<html> <head> <script type="text/javascript"> function setNewColor(color) { document.body.style.backgroundColor = color; } </script> </head> <body> <center> <a href="#" onclick="setNewColor('orange');">Orange</a><br /> <a href="#" onclick="setNewColor('navy');">Navy</a><br /> <a href="#" onclick="setNewColor('yellow');">Yellow</a><br /> <a href="#" onclick="setNewColor('lime');">Lime</a><br /> <a href="#" onclick="setNewColor('black');">Black</a><br /> <a href="#" onclick="setNewColor('white');">White</a><br /> </center> </body> </html>Statt Farben kannst du auch Bilder laden, musst halt bisschen was anpassen, selfHTML hilft dir da weiter.
Wichtig: Wenn du mit JS weitermachst, dann lade die Bilddateien vor, selfHTML und/oder Google werden dir da auch weiter helfen können.
-
NitBek sucht doch n wechsel zwischen Hintergrundbildern nicht zwischen Hintergrundfarben habe ich verstanden oder?
-
NitBek sucht doch n wechsel zwischen Hintergrundbildern nicht zwischen Hintergrundfarben habe ich verstanden oder?
Ja stimmt schon, aber das Prinzip ist das selbe, dann übergibt man oder per Zufall den Pfad des Bildes und fertig. Statt "backgroundColor" dann eben "backgroundImage".
-
-
...
<a href="#" onclick="setNewColor('orange');">Orange</a><br />
<a href="#" onclick="setNewColor('navy');">Navy</a><br />
<a href="#" onclick="setNewColor('yellow');">Yellow</a><br />
<a href="#" onclick="setNewColor('lime');">Lime</a><br />
<a href="#" onclick="setNewColor('black');">Black</a><br />
<a href="#" onclick="setNewColor('white');">White</a><br />
...lass mich in die Zukunft schauen: nächste Frage wird sein "Wieso springt der Browser bei jedem Farbwechsel an den Seitenanfang?"
-
-
Hallo,
am besten gehst du ins <Head> und definierst da n Body Background-Image('url') und verpasst dem ne ID eben Body 2x mit einer anderen ID und nem anderen hintergund. Somit hast du in der Id einen Hintergrund definiert und kannst da abrufen. Du erstellst ne simpele Funktion die das wechselt. Du im Link den du klickst könntest du schreiben onMouseDown="" oder onClick="" eine Variable die für deine Funktion wichtig ist und sie in gang setzt. Ich kann dir keinen Quellcode erstellen tut mir leid. Ich hoffe das war eine Hilfe für dich. Such einfach mal unter "CSS Background-Image" und "Javascript hintergrund wechseln" und "Javascript Event", dafindest du bestimmt was.
Mathias
-
Hallo Mathias,
am besten gehst du ins <Head> und definierst da n Body Background-Image('url')
häää? Was hat body im head zu suchen?
und verpasst dem ne ID eben Body 2x mit einer anderen ID und nem anderen hintergund.
Häää?
Somit hast du in der Id einen Hintergrund definiert und kannst da abrufen.
Sprichst du von zwei verschiedenen Selektoren, z.B. body#id1 und body#id2, im Stylesheet? Dann sag das doch bitte auch.
Du erstellst ne simpele Funktion die das wechselt.
Ja, die setzt einfach die id des body-Elements - dazu braucht's nicht einmal eine Funktion; das ist eine einzige Zuweisung, die man direkt im Eventhandler notieren könnte.
Du im Link den du klickst könntest du schreiben onMouseDown="" oder onClick="" eine Variable die für deine Funktion wichtig ist und sie in gang setzt.
Am besten verwendet man dafür gar keinen Link, denn man möchte ja gar keine Ressource verlinken. Die Eventhandler heißen im übrigen onmousedown (nicht onMouseDown) und onclick (nicht onClick).
Ich hoffe das war eine Hilfe für dich.
Kann ich mir nicht vorstellen. Wahrscheinlich hast du das Richtige gemeint, aber deine Erklärung war so verworren, dass man schon genau Bescheid wissen muss, um deinen Gedanken einigermaßen zu folgen.
Such einfach mal unter "CSS Background-Image" und "Javascript hintergrund wechseln" und "Javascript Event", dafindest du bestimmt was.
Das war der beste (und IMHO der einzige verständliche) Rat in deinem Posting.
So long,
MartinPS: Nichts für ungut, alle haben mal klein angefangen. Aber ich habe deinen Text gelesen und erstmal nur Bahnhof verstanden. Ich vermute, da bin ich nicht der einzige.
-