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