Bild und Text gleichzeitig ändern

[michaelb]

Hallo,

ich habe folgende Problemstellung bei einer Bildergalerie:
Wenn ich mit der Maus über einen Text fahre, soll dieser die Farbe ändern und zugleich das Bild einen farbigen Rahmen erhalten. Wenn ich mit der Maus über das Bild fahre, soll das Gleiche passieren. Das habe ich realisieren können, indem ich <img> und <span> in ein <a>-tag gesteckt habe.
Dem <span> habe ich über {position: absolute;padding-top:230px} eine Platzierung unterhalb der Galerie zugewiesen. Auch das funktioniert.

Was mir nicht gefällt: Ich kann den Text im <span> nicht ausrichten. Er hat nur so viel Platz, wie das Bild an Breite einnimmt.
Ich möchte, dass der Text frei fließt. Wie kann ich dieses Problem lösen? Muss ich <span> gegen irgendetwas anderes austauschen?
Gibt es hierzu eine Lösung mit CSS oder muss ich mit JavaScript arbeiten?

Hier der Link zur Seite: www.doerthe-baeumer.de/arbeiten_b.html

Vielen Dank im Voraus!

 

[kkapsner]

Das wird mit CSS schwierig werden (mir fällt nichts Intelligentes ein).
Ich denke mal eine JS-Lösung wäre einfacher. Wieviel jS kannst du denn?

 

[michaelb]

Das wird mit CSS schwierig werden (mir fällt nichts Intelligentes ein).
Ich denke mal eine JS-Lösung wäre einfacher. Wieviel jS kannst du denn?

Danke für den Hinweis.
Mit JavaScript kenne ich mich leider nur sehr wenig aus. Ich vermute, dass ich mit getElementById arbeiten muss. Ich weiß aber nicht, wie das geht.
Kannst du mir weiterhelfen?

 

[kkapsner]

Für die Grundlagen: http://de.selfhtml.org

 

[anna55]

Was mir nicht gefällt: Ich kann den Text im <span> nicht ausrichten. Er hat nur so viel Platz, wie das Bild an Breite einnimmt.
Ich möchte, dass der Text frei fließt.

Versteh nicht wirklich, was du meinst. Willst du, dass immer nur der Text des Bildes, welches gehovert ist, angezeigt wird und dann eben soviel Text, wie du dir als Beschreibung des Bildes vorstellst?
Hier ist so ein Beispiel realisiert. Schau dir an, wie es umgesetzt ist.
http://www.cssplay.co.uk/menu/gallery_click.html

 

[michaelb]

Versteh nicht wirklich, was du meinst. Willst du, dass immer nur der Text des Bildes, welches gehovert ist, angezeigt wird und dann eben soviel Text, wie du dir als Beschreibung des Bildes vorstellst?
Hier ist so ein Beispiel realisiert. Schau dir an, wie es umgesetzt ist.
http://www.cssplay.co.uk/menu/gallery_click.html

Bild und Text sollen sich bei hover beide und gleichzeitig ändern. Egal, ob ich über das Bild oder den Text mit der Maus fahre.
Das von dir genannte Beispiel finde ich irritierend, weil dem fullsize-Bild bei Mouseover über ein thumbnail ein falscher Titel zugeordnet wird.
Mein eigentliches Problem besteht darin, dass ich mit CSS keine Möglichkeit sehe, beliebig viel Platz für die Texte einzurichten.