HTML Verlinkungen und Aktualisierung nur innerhalb eines Bereichs

[momdiavlo]

Hi CB`ler,

ich bin ein blutiger Anfänger (das soll als Verteidigung dienen). Ich weiß nicht wie ich das nennen soll, was ich brauche, daher konnte ich nur schlecht danach suchen. Ich versuche mein Problem zu skizzieren:



In Bereich B möchte ich eine Tabelle, in der Beispielsweise die Zahlen 1-20 drin sind. Klicke ich auf eine Zahl, aktualisiert sich nur der Bereicht B, nicht aber Bereich A und C. Das heißt, das Bild soll sich ändern, der Text dazu und die Zahl in der Tabelle soll farblich markiert sein.

Die Tabelle mit Scrollbar habe ich hinbekommen. Doch wie mache ich das jetzt mit dieser Verlinkung? Versteht man was ich möchte? Die Bereiche unterteile ich momentan mit <section>.

Ach ja, ich möchte das ganze mit HTML 5 realisieren. Ist das möglich?

/Edit
Ich glaube ich suche wohl eine Art Bildergalerie mit Text? Dafür wäre dann wohl am ehesten jQuery geeignet?

 

[Madman1209]

Hi,

das Stichwort dazu ist AJAX bzw. JavaScript. Damit kann man dynamisch Inhalte nachladen / ändern, ohne die komplette Seite neuladen zu müssen.

Also in der Tabelle beim "onclick" Ereignis per AJAX den Content nachladen oder (falls dieser schon lokal vorhanden ist) einfach in deinen Bereich einbauen.

Dazu braucht man im Grunde weder jQuery noch ein anderes Framwork, das geht auch ohne.

VG,
Mad

 

[momdiavlo]

Danke, das Stichwort sollte mir eigentlich schon reichen. Hatte gehofft, dass man das direkt mit HTML5 lösen kann. Mit JS sollte ich es irgendwie hinbekommen, jetzt weiß ich ja, nach was ich suchen muss.

 

[Madman1209]

Hi,

wenn Probleme auftreten einfach nochmal schreiben

VG,
Mad

 

[momdiavlo]

Puh, da habe ich einiges vor. Ist doch wesentlich aufwändiger als gedacht. Eine Bildergalerie scheint kein Problem zu sein, aber diese mit ordentlich Text zu versehen, der zum Beispiel neben dran erscheinen soll, übersteigt wohl meine Fähigkeiten. Als ersten Bezugspunkt habe ich diese Seite gefunden: JavaScript Bildergalerie. Jetzt müsste ich nur noch rausfinden, wie man zusätzlich auch Text ändern lassen kann.

 

[T0a5tbr0t]

Sofern die Liste an Bildern nicht ewig lang ist, würde ich einfach den ganzen Content schön strukturiert in eine lange HTML Datei packen z.B. als Liste. Dann mit JavaScript durch setzten von Klassen alle Listenelemente (bis auf das Start-Element) ausblenden und Event-handler setzten, welche dann zwischen den Bildern wechseln (z.B. einfach durch umsetzen von Klassen von display: hidden auf display: whatever). Die Zuordnung von Bild und Text kann man einfach im HTML festlegen, dafür ist die "Markup Language" ja da.
Sowas kann man aber auch sicher gut mit den vielen fertigen JavaScript Bildergalerien / Content-Karussellen machen. Besonders wenn man es ordentlich machen will (z.B Pfeiltasten Events beachten, Hash im Link setzten / lesen, damit Verlinkung richtig geht) würde ich zu fertigen Lösungen raten.