Hallo,
ich habe hier einen Code den ich benutzen wollte um Links mit zusätzlichen Infos beim mouseOver zu versehen. Bei den Links handelt es sich um Newsletter, beim darüberfahren sollen einfach die Themen angezeigt werden die der Newsletter beinhaltet. Das kann man zwar auch schöner lösen allerdings muss ich das alles in ein CMS System einbinden und da scheint es einige Schranken zu geben. Jetzt habe ich zwei Probleme:
In diesem Sinne vielen Dank für Eure Hilfe und für alle Ballspieler eine gesegnete WM.
Hier der Code:
ich habe hier einen Code den ich benutzen wollte um Links mit zusätzlichen Infos beim mouseOver zu versehen. Bei den Links handelt es sich um Newsletter, beim darüberfahren sollen einfach die Themen angezeigt werden die der Newsletter beinhaltet. Das kann man zwar auch schöner lösen allerdings muss ich das alles in ein CMS System einbinden und da scheint es einige Schranken zu geben. Jetzt habe ich zwei Probleme:
- Der mouseOver funktioniert nur im FFox nicht im IE, kann mir da jemand weiterhelfen?
- Wenn ich den Code in die bestehende Seite einbinde zerschießt es mir beim mouseOver total das Layout. Verwende ich es als Testseite (nur den Code) im FFox dann klappt alles. Lade ich es dann in die bestehende Seite und fahre mit der Maus drüber wird die Infobox nicht am Zeiger sondern über den einzelnen Links angezeigt. Die ganzen Links rutschen dann nach unten. Außerdem wird der Infokasten nich vollständig dargestellt???
In diesem Sinne vielen Dank für Eure Hilfe und für alle Ballspieler eine gesegnete WM.
Hier der Code:
HTML:
<TABLE border=0 cellSpacing=1 cellPadding=1 width="100%">
<html>
<head>
<style type="text/css">
<!--
.ToolTipTitel {
color: white;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 10pt;
}
.ToolTipInhalt {
color: 009682;
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 Initialisierung = 0
var Ex, Ey, TitelFarbe, TextFarbe, ContentInfo;
TitelFarbe = "009682"
TextFarbe = "e5e5e5"
function ToolTipBewegen(layerName, FromTop, FromLeft, e)
{
document.getElementById(layerName).style.top = FromTop;
document.getElementById(layerName).style.left = FromLeft + 15;
}
function Aktivieren()
{
Initialisierung=1;
}
function Deaktivieren()
{
Initialisierung=0;
}
function Starten(e)
{
if(Initialisierung)
{
Ex = document.all ? window.event.x : e.pageX;
Ey = document.all ? window.event.y : e.pageY;
ToolTipBewegen("ToolTip", Ey, Ex, e);
document.getElementById('ToolTip').style.visibility = "visible";
}
else
{
ToolTipBewegen("ToolTip", 0, 0);
document.getElementById('ToolTip').style.visibility = "hidden";
}
}
function ToolTip(layerName, TTitel, TInhalt)
{
ContentInfo = '<table border="0" width="150" cellspacing="0" cellpadding="0">'+'<tr><td width="100%" bgcolor="#b7b6b6">'+'<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>';
document.getElementById(layerName).innerHTML = ContentInfo;
}
//-->
</script>
</head>
<body onmousemove="Starten(event);">
<div id="ToolTip"></div>
<TBODY onMouseMove="Starten(event);">
<div id="ToolTip"></div>
<TR>
<TD><STRONG>DSL-Version</STRONG></TD>
<TD><STRONG>ISDN-Version</STRONG></TD></TR>
<TR>
<TD>
<UL type=square>
<LI><a href="[ioID]E5F69C7F67CA42AAA89927DBB72CBC72/2010_mai_gross(1).pdf" onMouseover="ToolTip('ToolTip','Inhaltsverzeichnis April 2010','<p> KIT Alumni - quo Vadis </p> <p> Alumnireise 2010 </p> <p> Rueckenuebungen fuer den Arbeitsplatz</p><p> Alumni im Gespraech - Sami Atiya: Die eigenen Staerken erkennen</p> <p>Taxi in der Tasche</p> <p>Glasmurmeln und Eiswolken am tropischen Himmel</p> <p>Clean Air auch in Privathaushalten</p> <p>Weltrekord in energieeffizienter Datenverarbeitung</p> <p>Neues aus dem KIT</p> <p>Aus der Stadt karlsruhe</p> <p>Tipps und Termine</p> <p>In eigener Sache</p> '); Aktivieren();" onMouseout="Deaktivieren();">Newsletter April 2010</a> </LI>
<LI><A href="[ioID]E5F69C7F67CA42AAA89927DBB72CBC72/2010_03_gross.pdf" target=_blank>Newsletter Maerz 2010</A> </LI>
<LI><A href="[ioID]E5F69C7F67CA42AAA89927DBB72CBC72/2010_02_final_gross.pdf" target=_blank>Newsletter Februar 2010</A> </LI>
<LI><A href="[ioID]E5F69C7F67CA42AAA89927DBB72CBC72/Newsletter01_2010_gross.pdf" target=_blank>Newsletter Januar 2010</A></LI></UL></TD>
<TD>
<LI><A href="[ioID]E5F69C7F67CA42AAA89927DBB72CBC72/2010_mai_klein.pdf">Newsletter Mai 2010 - NEU!</A> </LI>
<LI><a href="[ioID]E5F69C7F67CA42AAA89927DBB72CBC72/2010_mai_gross(1).pdf" onMouseover="ToolTip('ToolTip','Inhaltsverzeichnis April 2010','<p> KIT Alumni - quo Vadis </p> <p> Alumnireise 2010 </p> <p> Rueckenuebungen fuer den Arbeitsplatz</p><p> Alumni im Gespraech - Sami Atiya: Die eigenen Staerken erkennen</p> <p>Taxi in der Tasche</p> <p>Glasmurmeln und Eiswolken am tropischen Himmel</p> <p>Clean Air auch in Privathaushalten</p> <p>Weltrekord in energieeffizienter Datenverarbeitung</p> <p>Neues aus dem KIT</p> <p>Aus der Stadt karlsruhe</p> <p>Tipps und Termine</p> <p>In eigener Sache</p> '); Aktivieren();" onMouseout="Deaktivieren();">Newsletter April 2010</a> </LI>
<LI><a href="[ioID]E5F69C7F67CA42AAA89927DBB72CBC72/2010_03_klein.pdf" target=_blank>Newsletter Mai 2010</A> </LI>
<LI><A href="[ioID]E5F69C7F67CA42AAA89927DBB72CBC72/2010_02_final_klein.pdf" target=_blank>Newsletter Februar 2010</A> </LI>
<LI><A href="[ioID]E5F69C7F67CA42AAA89927DBB72CBC72/Newsletter01_2010_klein.pdf" target=_blank>Newsletter Januar 2010</A></LI></UL></TD></TR></TBODY></TABLE><!--
>