Texteinblendungen bei Bild mit Hotspots

[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.