nicht angemeldet
Tooltip Fensterrand-Problem
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>
-
<html>
Hier fehlt schon mal der DOCTYPE
<head>
<style type="text/css">
.tooltiptitle {color: #ffffff; font-family: verdana; font-weight: bold; font-size: 7pt}7pt dürfte auf den meisten Rechnern nicht mehr lesbar sein. 'pt' ist sowieso keine Größe die für den Monitor verwendung finden sollte. 'px' ist die Einheit, die der Monitor darstellt
<script language = "javascript">
Da fehlt das type Attribut.
<!--
var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0und hier hast du schon mal ein Problem, da das Skript im Prinzip nur auf 4'er Browser testet und alle modernen Browser aussen vor läßt.
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))
}diese eval Orgie ist sehr fehleranfällig, langsam und schwer zu debuggen. sinnvoller ist es die Funktionen hier abzufragen, anstatt Strings zu verwenden:
function MoveToolTip(layerName, FromTop, FromLeft, e){
var style;
if(document.getElementById) // moderne Browser
{
style = document.getElementById(layerName).style;
else if(document.layers) // NN 4.x
{
style = document.layers[layerNAme];
}
else if(document.all) // alter IE
{
style = document.all[layerName].style;
}
style.top = .........
}Tja, das ist die Frage, was du hier in Wirklichkeit machst. FromTop ist ein String, in dem 'Name' statt durch eval(FromTop) soll wohl ein Objekt erzeugt werden, das es aber nicht gibt (wie gesagt eval ist sowieso schlecht und in 99% der Fälle auch überflüssig, aber hier verhindert es noch einen Fehler zu finden)
Hier wirst du auch die Änderung für dein Anliegen einbauen können, du musst nur den Layer in den sichtbaren Bereich verschieben, dazu musst du Wissen wie breit dein angezeigter Bereich ist mit Hilfe von window.innerWidth oder document.body.clientWidth.
function ReplaceContent(layerName){
if(ie){document.all[layerName].innerHTML = ContentInfo}
if(ns){
with(document.layers[layerName].document)
{
open();
write(ContentInfo);
close();auch das läuft in neuen Browsern nicht.
Das Skript bedarf einer gründlichen Überarbeitung.
Struppi.