nicht angemeldet
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.