Bilder & Text Overlays

[shatter]

Hallo!

für ein Projektchen benötige ich die Möglichkeit, ein vorgegebenes JPG mit Texten zu überlagern - oder eine alternative Lösung.
Es handelt sich um ein Rechteck, dass fünf "Reiter" oben und Links vom Rechteckfeld besitzt. Alle sechs Flächen sind mit MAPs aktiviert.

Das Ganze ist Teil einer Tabelle mit 10 x 10 solcher Rechtecke
Bsp:
      <td width=145>
         <img id="Bild1-1" height=100 width=145 src="./assets/images/Button_p_i_n_s_fb.jpg" border=0 alt="Button_p_i_n_s_fb"
                         title="Prozess 1-1" usemap="#map1-1">
         <map name="map1-1">
            <area shape=rect alt="Prozess 1-1"       coords="0,30,119,100"   href="./html/seite_m_1-1.html" title="Prozess 1-1"      >
            <area shape=rect alt="Profile"           coords="7,0,50,32"      href="./html/seite_p_1-1.html" title="Profile"          >
            <area shape=rect alt="Informationen"     coords="49,0,96,30"     href="./html/seite_i_1-1.html" title="Informationen"    >
            <area shape=rect alt="Nützliches"        coords="94,0,138,31"    href="./html/seite_n_1-1.html" title="Nützliches"       >
            <area shape=rect alt="Schnittstellen"    coords="117,19,145,55"  href="./html/seite_s_1-1.html" title="Schnittstellen"   >
            <area shape=rect alt="Funktionsbereiche" coords="119,55,145,100" href="./html/seite_f_1-1.html" title="Funktionsbereiche">
         </map>
<!--     die Textzeilen sollen im Rechteckbereich des JPG's stehen -->
         <x1>Zeile 1</x1><br>
         <x2>Zeile 2</x2><br>
         <x3><a href="./html/seite_m_1-1.html">Zeile 3</a></x3><br>
      </td>

Mein Versuch: relative Verschiebung des Textes durch StyleSheet. x1, x2 und x3 sind im css-File definiert:

x1 {
   position:relative;
   top:-63px;
   left:8px;
   color:black;
   font-family:Helvetica,sans-serif,bold;
   font-size:12px;
   font-weight:bold;
}

x2 {
   position:relative;
   top:-60px;
   left:8px;
   color:black;
   font-family:Helvetica,sans-serif;
   font-size:12px;
}

x3 {
   position:relative;
   top:-58px;
   left:8px;
   color:black;
   font-family:Helvetica,sans-serif;
   font-size:12px;
}

Siehe auch auf obiger Web-Page.

Wie man sieht, funktionert das auch soweit, aber die nächste Tabellenzeile wird dadurch drei Textzeilen weit nach unten verschoben, und der Abstand für eine angenehme Optik zu groß.

Der ganze Code (bzw die Lösung) muss möglichst simpel bleiben; er soll später per Servlet aus Datrenbankdaten generiert werden.

Irgentwelche Ideen / Tips?

Joachim

[Saju]

HI! ich hab mir zwar nicht deinen ganzen Text durchgelsen, aber für etwashab ich ne lösung. also mach einfach das bild als hintergrund:

-->

<td style="background:url("blbalba.jpg")">Hier dein Text über dem Bild</td>

Ich hoffe ich habe dir geholfen. cih hba ja leider nicht alles gelsen. sry.

*hoff*

[Hopsel]

Hi Saju!

Ich hoffe ich habe dir geholfen. cih hba ja leider nicht alles gelsen. sry.

Dann hättest du das mal besser tun sollen. Dein Tipp bringt ihm gar nichts.

Hast du schon versucht, die Bilder bzw. die MAP per margin und padding auszurichten?

MfG H☼psel

[shatter]

Hi Hopsel,

Hast du schon versucht, die Bilder bzw. die MAP per margin und
padding auszurichten?

Schau mal auf das Codebeispiel oder www.thuex.de ... über den Images liegt ein MAP, und das klappt auch.

Den Text bekomme ich ja auch korrekt positioniert, nur "drücken" die drei Textzeilen die folgende Tabellenzeile nach "unten"; die relative Positionierung der Textzeilen durch das Style-Sheet hat offenbar keinen Einfluß auf die Berechnung der Spaltenhöhe. Durch Ziehen eines Rahmens (border=1) konnte ich sehen, dass die drei Leerzeilen (oder deren Platz) sich INNERHALB der Zelle befinden, nicht zwischen den Zellen. Also kein "cellspacing" ...

Eine Lösung wäre es, wenn ich die untere Tabellenzeile um x Pixel "nach oben" verschieben könnte, da kenne ich aber keine HTML-Methode.

Joachim

[MudGuard]

Hi,

<x1>Zeile 1</x1><br>

Was bitte soll x1 sein?
Du hast als Themenbereich HTML gewählt. HTML kennt kein Element namens x1. (Genausowenig wie x2 oder x3)

Wie man sieht, funktionert das auch soweit, aber die nächste Tabellenzeile wird dadurch drei Textzeilen weit nach unten verschoben,

So ist relative Positionierung definiert. Der Platz wird dort reserviert, wo das Element ohne die relative Positionierung erscheinen würde.

cu,
Andreas