:hover-Text in Tabellen positionieren

[Bodo Thiesen]

Ich habe eine Übersichtskarte für ein Spiel, in der es Felder (Tabellenzellen) in der Größenordnung 10x10 Pixel gibt. Diesen Feldern sollen Informationen zugeordnet werden können, die nur angezeigt werden sollen, wenn man mit der Maus über das entsprechende Feld fährt. Funktioniert soweit wunderbar - fast. Leider wird nur der Text immer genau unter dem Mauscursor angezeigt, so daß man den Cursor nicht einfach auf die rechts, oben oder unten benachbarten Felder verschieben kann, um diese Information zu sehen, weil die Felder ja durch den hover-Text bereits überdeckt sind. Was ich brauche ist also die Möglichkeit, den Text relativ zur eigentlichen Anzeigeposition zu verschieben, doch alle Experimente mit position:absolute/relative in Kombination mit left/right bzw. top/bottom bleiben erfolglos, oder verschlimmerten die Lage nur.

Als Beispiel soll einfach mal folgendes dienen, die vollständige Karte kann hier betrachtet werden ($width und $height sind die besagten 10 Pixel, das soll ein bischen Dynamisch sein, aber das wird ja vom Skript erledigt, der Browser sieht da nur noch Zahlen): http://bothie.sharedaemon.org/cgi-bin/RPG/TheCrown/Uebersichtskarte.sh

Style:

table {
   margin:0px;
   background-color:#000000;
   border-width:0px;
   border-style:solid;
   border:0;
   font-size:5px;
   table-layout:fixed;
   width:$((width*55+56))px;
   line-height:$((width))px;
   border-collapse:collapse;
   text-align:center;
}
tr {
   background-color:#ffffff;
   height:${height}px;
}
td {
   background-color:#00cc00;
   height:${height}px;
   width:${width}px;
}
th {
   border-width:0px;
   background-color:#ffffff;
   height:${height}px;
   width:${width}px;
}
td span {
   visibility:hidden;
   margin-top:1.5em;
   padding:1em;
   text-decoration:none;
   font-size:medium;
   border:1px solid #aa5500;
   color:#aa5500;
   background:#ffff55;
}
td:hover span {
   visibility:visible;
}

Für die verschiedenen Länder gibt es unterschiedliche Farben. fX - X ist das Land. [ou][rl] steht für oben/unten rechts/links, und soll dienen, den Tooltip innerhalb der Tabelle anzuzeigen, damit der Tooltip nicht das Browserfenster verlässt. Also geplant war sowas wie für or right:-2em;positition:relative; und für ol right:2em;positition:relative; für oben vs. unten entsprechend mit top und bottom.

td.f0or { background-color:#0000ff; }
td.f0ol { background-color:#0000ff; }
td.f0ur { background-color:#0000ff; }
td.f0ul { background-color:#0000ff; }

td.f1or { background-color:#339966; }
[...]

Und die Tabelle sieht dann so aus (mit 55 Spalten und 74 Zeilen, hier nur ein paar angegeben), THs sind hier weggelassen

<table cellpadding="0" cellspacing="1" border="1" bordercolor="black">
   <tr>
      <td title="Koordinaten" class=f0ol><span>Tooltiptext</span></td>
      [x mal wiederholt, dann]
      <td title="Koordinaten" class=f0or><span>Tooltiptext</span></td>
      [und das dann auch noch x mal]
   </tr>
   [davon gibt's nen Haufen, und dann gibt's noch von dem hier nen ganzen Haufen]
   <tr>
      <td title="Koordinaten" class=f0ul><span>Tooltiptext</span></td>
      [x mal wiederholt, dann]
      <td title="Koordinaten" class=f0ur><span>Tooltiptext</span></td>
      [und das dann auch noch x mal]
   </tr>
</table>

So, gescheiterte Versuche will ich jetzt nicht mehr aufzählen. Guckt Euch ggf, die URL an, es sollte ja mit der Beschreibung auch klar geworden sein, wie in etwa das ganze nachher aussehen soll. Ich komm einfach nicht mehr weiter.

Gruß, Bodo

PS: Die generierte Datei sieht im prinzip genauso aus wie das hier gepostete, eignet sich aber nicht so gut zum angucken, weil da ziemlich viel auf eine Zeile zusammengefasst wird. Also Zeilenlängen von >1000 Zeichen oder so. Dem Browser ist das ja aber egal.

[Christoph Schnauß]

hallo,

Als Beispiel soll einfach mal folgendes dienen

Warum orientierst du dich nicht an dem Beispiel aus den Tipps-und-Tricks-Artikeln?

Grüße aus Berlin

Christoph S.

[Bodo Thiesen]

Als Beispiel soll einfach mal folgendes dienen

Warum orientierst du dich nicht an dem Beispiel aus den Tipps-und-Tricks-Artikeln?

Weil die sich sämtlichst auf die absolute Positionierung der Infobox beschränken .oO(Bin wohl nicht der einzige, der mit der relativen Positionierung Probleme hat ^^). Ich wollte die Infobox relativ zum :hover-Element haben, eben im Sektor oben links rechts unter dem Element ( left:1em; top:1em; oder so), im Sektor oben rechts ebenfalls unter, aber links vom Element ( right:1em; top:1em; ) usw, das einzige, das bisher aber funktioniert hat ist eben die absolute Positionierung. Die wollte ich aber nicht wirklich haben.

Gruß, Bodo

[Ingo Turski]

Hi,

das einzige, das bisher aber funktioniert hat ist eben die absolute Positionierung. Die wollte ich aber nicht wirklich haben.

doch, wolltest Du. ;-)
Dir fehlt nur noch das Verständnis für den Bezugsrahmen. Schau Dir nur dynamische Navigationsleisten an - die Untermenüs sind absolut positioniert, orientieren sich jedoch am übergeordneten Menüpunkt.

freundliche Grüße
Ingo