rollover (Bild und Infotexte)

[nino]

Liebe Community

Ich hoffe dass mein Post hier richtig ist - wenn nicht bitte verschieben. Dies ist mein erster Post.

Ich habe folgendes Problem und ich benötige erstmals einen Ansatz.

Ich bastle gerade eine Website welche einen Bereich hat der identisch mit dem abgebildeten Bild ist.

Ausgangsposition ist Abbildung A - das heißt, die Bilder sind in schwarz-weiss und in den Bereichen 1 und 2 sind KEINE INFOS zu sehen.

Fährt man nun mit der Maus über eines der Bilder (Schmetterling oder spinne) dann soll dieses in Farbe erscheinen (normaler rollover effekt) - soweit bin ich auch schon. Nur sollen jetzt zusätzlich in den bereichen 1 und 2 Informationen zu dem abgebildeten Bild eingeblendet werden.

Sobald man den "sensitiven Bereich" (1 oder 2) verlässt wird wieder A angezeigt.

Das ganze ist zur Zeit eine Tabelle, wie auch in der Abbildung zu sehen ist.

Wichtig ist es mir dass das schlussendlich OHNE JAVASCRIPT funktioniert.

Wie ist das möglich???

Ich brauche erst einmal nur einen Ansatz.

Danke.

nino

[Gernot Back]

Hallo nino,

Das ganze ist zur Zeit eine Tabelle, wie auch in der Abbildung zu sehen ist.

Wichtig ist es mir dass das schlussendlich OHNE JAVASCRIPT funktioniert.

Wie ist das möglich???

Von der Tabelle würde ich mich an deiner Stelle bei diesem Vorhaben ganz verabschieden. Es sollte umzusetzen sein, wenn du deine einzelnen (Sensitiv- und Anzeige-)Bereiche aus floatenden Elementen zusammenfügst und die Inhalte vom Quellcode her zwar in den sensitiven Elementen versteckt platzierst (display:none), sie dann aber erst bei Hover über ihr sensitives Elternelement durch absolute Positionierung über den Anzeigeflächen platzierst. Dazu würde ich nur dem Element, das alle Flächen zusammenhält position:relative verpassen, damit du dich mit der absoluten Positionierung immer auf eine bestimmte Ecke des Gesamtmoduls beziehen kannst.

Wenn du allerdings auch den IE6 bedienen willst, wird das ziemlich kompliziert ohne JavaScript. Da reagieren ja nur A-Elemente auf Hover und in die darfst du nur Inline-Elemente schachteln.

Gruß Gernot