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 nach oben hin aufgeht, sich also über dem Link öffnet.
Anbei der Quelltext, den ich verwenden will.
<!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>
Bubumann35 Gast |
