PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : JavaScript-Bilderwechsel bei Klick auf HTML-Link


Hungser
2010-05-11, 18:42:52
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 (siehe Signatur) 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!

randy
2010-05-11, 20:07:35
Hi,

Was mir gerade in den Sinn gekommen ist, wäre ein sanfter Bildwechsel bei Mouseover über einen Menülink. Das wäre wahrscheinlich die einfachste Lösung mit minimalster Anpassung. Das die Links schon besetzt sind macht nichts, jquery z.B. kann man auch mit klassennamen bzw ids von elementen ansprechen.

Marscel
2010-05-11, 20:09:52
- Du könntest alles unter dem 2. Bild in ein Dokument packen und mittels Javascript verschiedene Blocks darstellten.

- Oder AJAX, wenns irgendwas in Hinsicht auf "zu groß" oder dynamische Inhalte hinausläuft.

- Du könntest einen Parameter in den Link setzen, woher du kommst und dann beim Laden der nächsten Seite ne Animation verzögert starten die das Bild zugehörig der Herkunft zur neuen Seite bewegt.

Ich weiß zwar nicht, was du dir konkret da vorstellst, aber aus Erfahrung kann ich dir sagen, dass so ziemlich alles umsetzbar ist mit mehr oder weniger Aufwand.

EDIT: Wenns bloß ums Hovern der Menüelemente und nicht um das, was nach dem Laden passiert, geht, vergiss, was ich geschrieben habe.

Hungser
2010-05-11, 20:29:47
Ne ne, es soll ned nur ums hovern gehen. Soll halt im Prinzip so ablaufen, dass ich meinetwegen "Music" anklicke und dann wird oben das Bild zu einem anderen sanft gefadet sowie unten dann der entsprechende Inhalt angezeigt.
Ich befürchte gerade, nachdem ich mir das alles nochmal angeschaut und durch den Kopf gehen lassen habe, dass das Problem ist, dass mit den Links ja eigentlich fast komplett neue Seiten geladen werden und nicht nur bestimmte Frames neu (oder?). Das könnte mit ner Variablen-Übergabe funktionieren, allerdings ist dann trotzdem der "weiche Übergang" hinüber. Oder ich weiß einfach nicht, was alles möglich ist. Daher frag ich ja. :D

//edit//

Ich glaube, dein 1. und dein 3. Vorschlag gehen so in die Richtung. Nur müsste ich dann quasi die gesamte Seite umbauen. ;(

Marscel
2010-05-11, 22:09:38
Eigentlich nicht, ganz grob:

- Du nimmst von jeder Seite (außer Galerien natürlich) den story-div, verpasst ihm ne ID und kopierst alle untereinander in ein Dokument.
- Per default sind alle erstmal unsichtbar.
- Jede ID kommt in eine Hashmap, deren Values Links zu Bilddateien sind.
- Je nach dem, welchen Parameter du z.B. einer load()-Funktion übergibst, blendet alle divs in der Liste aus und den richtigen ein und zusätzlich kannst du nun die Bilddatei laden.
- Der Index-div wird standardmäßig beim Laden der Seite angezeigt.