nicht angemeldet
Anzeigen von Tooltipps
Hallo liebe Leute,
ich habe eine Frage zum Thema Anzeigen von Tooltipps. Wie kann ich es erreichen, daß die Tooltippbox im unteren Drittel einer Seite (Bildschirm) nach oben hin aufgeht, sich also über dem Link öffnet, damit der ganze Text sichtbar ist und nicht außerhalb des Bildschirmes steht?
Unten stehend das Quelltextbeispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Unbenannt</title>
<style type="text/css">
<!--
.ToolTipTitel {
color: black;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 10pt;
}
.ToolTipInhalt {
color: black;
font-family: arial, sans-serif;
font-size: 10pt;
}
#ToolTip {
position:absolute;
width: 100px;
top: 0px;
left: 0px;
z-index:4;
visibility:hidden;
}
-->
</style>
<script language="javascript">
<!--
var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0
if(ns){doc = "document."; sty = ""}
if(ie){doc = "document.all."; sty = ".style"}
var initialize = 0
var Ex, Ey, TitelFarbe, TextFarbe, ContentInfo
if(ie)
{
Ex = "event.x"
Ey = "event.y"
TitelFarbe = "red"
TextFarbe = "yellow"
}
if(ns)
{
Ex = "e.pageX"
Ey = "e.pageY"
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=Starten
TitelFarbe = "red"
TextFarbe = "yellow"
}
function ToolTipBewegen(layerName, FromTop, FromLeft, e)
{
if(ie)
{
eval(doc + layerName + sty + ".top = " + (eval(FromTop) + document.body.scrollTop));
}
if(ns)
{
eval(doc + layerName + sty + ".top = " + eval(FromTop));
}
eval(doc + layerName + sty + ".left = " + (eval(FromLeft) + 15));
}
function InhaltErsetzen(layerName)
{
if(ie)
{
document.all[layerName].innerHTML = ContentInfo;
}
if(ns)
{
with(document.layers[layerName].document)
{
open();
write(ContentInfo);
close();
}
}
}
function Aktivieren()
{
initialize=1;
}
function Deaktivieren()
{
initialize=0;
}
function Starten(e)
{
if(initialize)
{
ToolTipBewegen("ToolTip", Ey, Ex, e);
eval(doc + "ToolTip" + sty + ".visibility = 'visible'");
}
else
{
ToolTipBewegen("ToolTip", 0, 0);
eval(doc + "ToolTip" + sty + ".visibility = 'hidden'");
}
}
function ToolTip(layerName, TTitel, TInhalt)
{
ContentInfo = '<table border="0" width="150" cellspacing="0" cellpadding="0">'+'<tr><td width="100%" bgcolor="#000000">'+'<table border="0" width="100%" cellspacing="1" cellpadding="0">'+'<tr><td width="100%" bgcolor='+TitelFarbe+'>'+'<table border="0" width="90%" cellspacing="0" cellpadding="0" align="center">'+'<tr><td width="100%">'+'<font class="ToolTipTitel"> '+TTitel+'</font>'+'</td></tr>'+'</table>'+'</td></tr>'+'<tr><td width="100%" bgcolor='+TextFarbe+'>'+'<table border="0" width="90%" cellpadding="0" cellspacing="1" align="center">'+'<tr><td width="100%">'+'<font class="ToolTipInhalt">'+TInhalt+'</font>'+'</td></tr>'+'</table>'+'</td></tr>'+'</table>'+'</td></tr>'+'</table>';
InhaltErsetzen(layerName);
}
//-->
</script>
</head>
<body onmousemove="Starten();">
<div id="ToolTip"></div>
123
<br>
<a href="#" onMouseover="ToolTip('ToolTip','Titel des Tool-Tips','Hier können Sie beliebigen Text <i>inkl. HTML-Tags</i> notieren.'); Aktivieren();" onMouseout="Deaktivieren();">Fahren Sie zum Testen des Tool-Tips über diesen Text.</a>
</body>
</html>
-
hi,
Wie kann ich es erreichen, daß die Tooltippbox im unteren Drittel einer Seite (Bildschirm) nach oben hin aufgeht, sich also über dem Link öffnet, damit der ganze Text sichtbar ist und nicht außerhalb des Bildschirmes steht?
in dem du abfragst, ob (position, an der du die box anzeigen willst) plus (ausmaße der box) noch kleiner als (verfügbare anzeigefläche) ist - und wenn nicht, die position dann entsprechend nach oben verschiebst.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."