nicht angemeldet
Hallo,
ich habe folgendes Script im Netz gefunden und würde gerne wissen, wie ich es so umprogrammieer, dass wenn der Tooltip sich am rechten Rand befindet den Inhalt links und nicht wie voreingestellt rechts von der Cursorposition angezeigt wird.
Wenn ihr den Code in euren Editor einfügt werdet ihr sehen, dass bei dem zweiten Link der Inhalt im nichts verschwindet. ich Hab auch versucht einen anderen id-tag mit einer anderen position einzufügen, doch es funktioniert nicht. Ich bräuchte praktisch nur eine Fallunterscheidung, dass, wenn sich der Link zu weit rechts befindet der ToolTip-Inhalt links vom Cursor erscheint. Leider weiß ich allerdings nicht genau, wie ich das machen soll. Wäre nett wenn ihr mir helfen könntet.
gruß dooce
<html>
<head>
<style type="text/css">
.tooltiptitle {color: #ffffff; font-family: verdana; font-weight: bold; font-size: 7pt}
.tooltipcontent {color: #000000; font-family: verdana; font-size: 7pt}
#ToolTip {position:absolute; width: 160px; 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, topColor, subColor, ContentInfo
if(ie){
Ex = "event.x"
Ey = "event.y"
topColor = "#000080"
subColor = "#eaeaea"
}
if(ns){
Ex = "e.pageX"
Ey = "e.pageY"
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=overhere
topColor = "#000080"
subColor = "#eaeaea"
}
function MoveToolTip(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 ReplaceContent(layerName){
if(ie){document.all[layerName].innerHTML = ContentInfo}
if(ns){
with(document.layers[layerName].document)
{
open();
write(ContentInfo);
close();
}
}
}
function Activate(){initialize=1}
function deActivate(){initialize=0}
function overhere(e){
if(initialize){
MoveToolTip("ToolTip", Ey, Ex, e)
eval(doc + "ToolTip" + sty + ".visibility = 'visible'")
}
else{
MoveToolTip("ToolTip", 0, 0)
eval(doc + "ToolTip" + sty + ".visibility = 'hidden'")
}
}
function EnterContent(layerName, TTitle, TContent){
ContentInfo =
'<table border="0" width="160" cellspacing="0" cellpadding="0">'+
'<tr><td width="100%" bgcolor='+topColor+'>'+
'<table border="0" width="90%" cellspacing="0" cellpadding="0" align="center">'+
'<tr><td width="100%">'+
'<font class="tooltiptitle"> '+TTitle+'</font>'+
'</td></tr>'+
'</table>'+
'</td></tr>'+
'<tr><td width="100%" bgcolor='+subColor+'>'+
'<table border="0" width="90%" cellpadding="0" cellspacing="1" align="center">'+
'<tr><td width="100%">'+
'<font class="tooltipcontent">'+TContent+'</font>'+
'</td></tr>'+
'</table>'+
'</td></tr>'+
'</table>';
ReplaceContent(layerName)
}
//-->
</script>
</head>
<body onmousemove="overhere()">
<div id="ToolTip"></div>
<table width="100%">
<tr>
<td align="left">
<a href="javascript:void(0)" onMouseover="EnterContent('ToolTip','Name','Daten 1<br>Daten 2'); Activate();" onMouseout="deActivate()">Name1</a>
</td>
<td align="right">
<a href="javascript:void(0)" onMouseover="EnterContent('ToolTip','Name','Daten 1<br>Daten 2'); Activate();" onMouseout="deActivate()">Name2</a>
</td>
</tr>
</table>
</body>
</html>