JavaScript-Bilderwechsel bei Klick auf HTML-Link
Hungser
- javascript
Servus,
ich habe mal eine Frage, in der Hoffnung, dass mir jemand hier weiterhelfen kann bzw. dass sie das ganze überhaupt so umsetzen lässt, wie ich mir das vorstelle.
Es geht um Folgendes:
Ich habe auf meiner Homepage ( http://www.diagnosehouse.de ) ein Header-Bild, darunter das Menü und darunter noch ein Bild, bevor der Textbereich beginnt.
Nun habe ich die Idee gehabt, das Bild unter dem Menü entsprechend dem Menüpunkt anzupassen. Soweit natürlich kein Problem, allerdings möchte ich in dem Fall nicht ein einen enfachen Bildwechsel durch Laden des neuen Images haben, sondern eine Art Slideshow, um einen weicheren und netten Übergang zwischen den einzelnen Bildern habe. So eine Slideshow ließe sich ja anhand von JavaScript einfach umsetzen, jedoch sind die Links zu den einzelnen "Unterseiten" ja bereits durch die HTML-Links "blockiert". Gibt es irgendwie die Möglichkeit, das so umzusetzen, wie ich es mir vorstelle oder ist es prinzipiell garnicht möglich, weil es sich durch die Links nicht umsetzen lässt bzw. die gesamte Slideshow auf jeder Seite neu geladen werden muss und somit eine Übergabe der Bilder garnicht möglich ist?
Vielen Dank schonmal!
Liebe(r) Hungser,
Deine Problembeschreibung ist reichlich wirr. Das lässt mich vermuten, dass Dir Dein Problem selbst noch nicht so völlig klar ist, sonst hättest Du es besser strukturiert beschreiben können.
Was *genau* willst Du doch gleich erreichen? Du willst, dass beim Wechsel auf eine andere Unterseite das Hintergrundbild in einer Animation wechselt?
1.) Überblendungen mit JavaScript
2.) Du müsstest auf der neuen Seite ein Script ausführen, das vom "alten" Bild auf das neue Bild wechselt. Aber woher "weiß" die neue Seite, welches Bild auf der alten Seite zuletzt angezeigt worden war? Ein Sript auf der Seite könnte alle Links mit URL-Parametern erweitern, die von Deinem Überblendungsscript ausgewertet werden könnten, um so die Überblendungen zu realisieren. Dieses müsste dann nach dem Laden der Seite ausgeführt werden.
Damit ist aber aus der Sache mit dem "Hintergrundbild" eine Sache mit einem "Vordergrundbild" geworden. Du benötigst ein echtes <img>-Element, welches das vorhandene Hintergrundbild "überdeckt", da Du kein Hintergrundbild (CSS-Eigenschaft) mit JavaScript animieren kannst, sondern nur die Opazität eines HTML-Elements zeitgesteuert manipulierst. Jedoch ist das Hinzufügen eines zusätzlichen Elements mit JavaScript ja kein Problem, dieses dann auch korrekt zu positionieren auch nicht...
Liebe Grüße,
Felix Riesterer.
Hi Felix,
vielen Dank schonmal für deine Antwort. Deine Vemrutung könnte richtig sein, da ich zwar im Studium viel mit Java zu tun habe, in Sachen Web-Design aber noch ziemlich am Anfang stehe und da absolut nicht weiß, was denn wirklich möglich und umsetzbar ist. Demzufolge bin ich auch in Sachen Programmierung nicht wirklich erfahren und weiß auch nicht, ob ich - sollte es denn überhaupt eine Problemlösung geben - diese überhaupt auch umsetzen kann. Daher kommt es sicher auch, dass ich mein Problem für euch nicht allzu verständlich beschreiben kann.
Ich versuche, das Ganze mal an einem genauen Beispiel zu erklären.
Nach dem Klick auf dem Intro-Button gelangt man auf meine News / Home-Seite. Über der Leiste, in der "News" steht, hat man nun das (verwischte) Bild mit der Nabe des Plattenspielers und dem Tonarm.
Wenn man nun auf den nächsten Punkt im Menü klickt, beispielsweise auf "Dates", ändert sich der Schriftzug in der Leiste, der Inhalt im Textbereich (logischerweise) und ich möchte gern, dass sich das Bild dort oben auch ändert. Prinzipiell geht das ja ganz einfach, da das Bild im Quellcode der einzelnen Seiten jedesmal neu definiert ist. Also wenn ich beispielsweise im Quellcode der dates.html einfach ein anderes Bild eingeben würde, wäre das theoretisch schon erledigt. Allerdings wird das Bild dann halt einfach geladen und ich hätte es gern so, dass das Bild dort oben mit einem "weichen Übergang", also quasi einer Art Slideshow übergefadet wird.
Vielen Dank schonmal,
Silvio (-> Hungser -> männlich :D)