Texteinblendungen bei Bild mit Hotspots

[Anja]

Hallo zusammen!

Folgendes Problem. In einer in der Breite variablen Tabelle (um das Layout bei verschieden Auflösungen zu erhalten) ist unter einem Einführungstext ein Bild. Diese Bild hat mehrere Hotspots, um bei einem Mouseover-out einen erklärenden Text ein-/auszublenden. Bei der "optimalen" Auflösung von 1024 werden diese "Text-Layer" an der richtigen Stelle beim Mouseover eingeblendet. Bei anderen Auflösungen jedoch werden diese Layer verschoben da der sich Erklärungstext und auch das Bild nach unten bzw oben verlängert bzw. verkürzt bzw. verschiebt. Irgendwie komme ich mit dem Ansatz CSS->Layer->relativ etc. nicht weiter. Auf welche Weise kann man das Verschieden der Erklärungstexte über dem Bild verhindern.

Alternativ wäre denkbar den Text unter dem Bild einzublenden. Hier jedoch hab ich das Problem das ich es nicht schaffe alle an einem Punkt einzublenden. Die Layer oder auch Ebenen liegen entweder neben oder untereinander. Auch nicht schön.
Mit meinen bescheidenen Kenntnissen von HTML komme ich hier nicht mehr weiter.
Für eine Lösung wäre ich sehr dankbar.
Danke
Anja

[bleicher]

Grüße,
eine ausfürlichere hilfe benötigt ausfürlichere fragestellung.
bisher hast du die lösungsmöglichkeiten selbst erwähn - willst du mehr über (relative) ositionierung erfahren, so würde ich http://de.selfhtml.org empfehlen
MFG
bleicher

[Anja]

Grüße,
eine ausfürlichere hilfe benötigt ausfürlichere fragestellung.
bisher hast du die lösungsmöglichkeiten selbst erwähn - willst du mehr über (relative) ositionierung erfahren, so würde ich http://de.selfhtml.org empfehlen
MFG
bleicher

Toll.
Leider funktioniert es mit relativ, static, etc. auch nicht so wie es soll. Der Ansatz ist vermutlich verkehrt. Wie kann man evtl das Bild mit diesen Texten gruppieren um sie gemeinsam zu verschieben und geht das dann mit mouseover bzw Java noch. Was verwenden Profis um so etwas darzustellen(wenn sie es müssten)? Wenn ich die Lösung wüsste würde ich hier nicht Fragen.
Ich weiß nicht wie ich in einer in der Länge variablen Tabelle einem Bild, das hier entsprechend der Browseraulösung nach links bzw. unten verschoben wird (bedingt durch den anderen Umbruch des Textes darüber), feste Positionen zu seiner zB. linken oberen Ecke zuweisen kann damit die verknüpften Ebenen entsprechend mitverschoben werden.
Danke für den Link! Den kannte ich noch nicht!!

[Felix Riesterer]

Liebe Anja,

Du hast da eine Tabelle... und wie Du schreibst, verwendest Du sie zu Layout-Zwecken. Das machen viele anfangs so. Und da Du von "Hotspots" schreibst, vermute ich, dass Du Dreamweaver einsetzt.

Dass man Tabellen nicht für Layoutzwecke missbraucht, ist inzwischen bei Seiten mit "semantischem (X)HTML" state-of-the-art. Tabellen sind nicht für's Layouten gedacht, sondern um tabellarische Daten/Inhalte damit auszuzeichnen. Aber wer mit Dreamweaver seine ersten Seiten baut, der/die kommt mit diesen Dingen erst wesentlich später (wenn überhaupt) in Berührung...

Eine Lösung zu Deinem Problem: Dein Bild und die Texte sind eine Einheit, stimmt's? Also solltest Du sie mit einem passenden HTML-Element http://de.selfhtml.org/html/text/bereiche.htm@title=gruppieren. Wenn sich dann Dein Bild und seine Texte in einem <div> befinden, dann kannst Du sie mittels CSS http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=positionieren. Um die Texte individuell zu positionieren eignet sich in diesem Zusammenhang <http://de.selfhtml.org/css/formate/zentrale.htm#individualformate@title=die Verwendung von IDs>.

Ein Code-Beispiel "ins Blaue hinein":
-----HTML-Datei-----

<div id="bild-mit-beschreibungen">  
    <img src="pfad/bilddatei.jpg" alt="alternativer Textinhalt für den Fall, dass das Bild nicht angezeigt/gesehen werden kann" />  
    <p id="beschreibung-mensch-hinten-rechts">Also das ist unser Fritz. Fritz reißt immer gerne schlechte Witze.</p>  
    <p id="beschreibung-frau-vorne-links">Das bin ich, die Anja. Ich habe mit viel Arbeit und Hingabe an dieser Seite gearbeitet.</p>  
    <p id="beschreibung-maskottchen">Unser Maskottchen hat uns schon viel Glück und Sympathien eingebracht. Deswegen nehmen wir es überall hin mit.</p>  
</div>

-----CSS-Datei-----

/* der Container (das <div>) */  
#bild-mit-beschreibungen {  
    position: relative;  
    top: 12px;  
    left: 23px;  
}  
  
/* das Bild im Container */  
#bild-mit-beschreibungen img {  
    border: 7px solid red;  
}  
  
/* gemeinsame Eigenschaften für alle genannten Beschreibungen */  
#beschreibung-mensch-hinten-rechts,  
#beschreibung-frau-vorne-links,  
#beschreibung-maskottchen {  
    position: relative;  
    width: 100px;  
    border: 1px solid black;  
    background-color: white;  
}  
  
/* individuelle Eigenschaften */  
#beschreibung-mensch-hinten-rechts {  
    top: 100px;  
    left: 250px;  
}  
  
#beschreibung-frau-vorne-links {  
    top: 10px;  
    left: 20px;  
}  
  
#beschreibung-maskottchen {  
    top: 50px;  
    left: 50px;  
}

Wie Du jetzt aber das Ein- und Ausblenden realisierst, überlasse ich Dir und Deinen Hotspots. Du hast ja die IDs, um sie mittels Javascript zu manipulieren.

Hoffentlich hilft Dir das weiter...

Liebe Grüße aus Ellwangen,

Felix Riesterer.