Max: Mouse over

Beitrag lesen

Hallo zusammen,

ich habe ein Problem im Bezug auf den Mouse over Effekt. Bei dem Pop-up Fenster entsteht ein transparenter Abstand zwischen dem Textfeld und dem Rahmen des Pop-up Fensters. Könnt ihr mir sagen, wie ich dieses Problem beheben kann? Hier ist mein html-Code:

<table border="2" cellpadding="5" cellspacing="0" width="100%">
<tr>
  <td bgcolor="#C0C0C0"> <small><b>Begriff</b></small> </td>
  <td bgcolor="#C0C0C0"><small><b> Erläuterung</b></small> <small>(diese Beschreibung verändert sich im gesamten Fragebogen <b>nicht</b>)</small </td>
</tr>
<tr>
  <td><small> Internetshop</small> </td>
  <td><small> - Mo-So 0-24Uhr<br> - Reiner Internethändler ohne Ladengeschäft<br>  - Übersichtliche und leicht zu bedienende Internetseite<br> - Keine Versand-und Rückversandkosten</small></td>
</tr>
<tr>
  <td><small> <a onmouseover="showToolTipp('','- Mo-Sa 9-20Uhr<br>- Stationärer Händler ohne Internetshop<br>- Kompetentes und freundliches Personal<br>- Fußläufig in 5 Minuten erreichbar und zahlreiche kostenlose Parkplätze','#000000','2','0','Arial','Verdana,Helvetica,Arial,sans-serif','left','left','#000000','#000000','2px','#FFFFFF','#FFFFFF','0','0','12px','12px','bold','normal','none');" onmouseout="hideToolTipp(); return true;"><font face="Verdana,Arial" size="2"><u>Ladengeschäft</u></font></a></small> </td>
  <td><small> - Mo-Sa 9-20Uhr<br>- Stationärer Händler ohne Internetshop<br>- Kompetentes und freundliches Personal<br>- Fußläufig in 5 Minuten erreichbar und zahlreiche kostenlose Parkplätze</small></td>
</tr>
<tr>
  <td><small><a onmouseover="showToolTipp('','- Mo-So 0-24Uhr/Mo-Sa 9-20Uhr<br> - Beide Kanäle mit o.g. Eigenschaften vorhanden <br>- Gleiches Angebot in beiden Kanälen','#000000','2','0','Arial','Verdana,Helvetica,Arial,sans-serif','left','left','#000000','#000000','2px','#FFFFFF','#FFFFFF','0','0','12px','12px','bold','normal','none');" onmouseout="hideToolTipp(); return true;"><font face="Verdana,Arial" size="2"><u>Internetshop/Ladengeschäft</u></font></a></small> </td>

<td><small> - Mo-So 0-24Uhr/Mo-Sa 9-20Uhr<br> - Beide Kanäle mit o.g. Eigenschaften vorhanden <br>- Gleiches Angebot in beiden Kanälen
<br>- Beschwerden oder Rückgaben in beiden Kanälen möglich unabhängig, wo gekauft wurde</small></td>
</tr>
</table>
<p></p>
<small><b><center>Wählen Sie nun bitte durch einen Klick auf den Kreis unter der Option jene, für die Sie sich entscheiden würden!</center></b></small>

<script language="JavaScript" type="text/javascript">
var breite = 500;
var mausabstand = 15;
var ToolTippShow = false;
var ToolTipp = null;
var breite, dir, b_Breite, b_Dir, b_VDir;

function setToolTipp (breite){
document.onmousemove = cursorMove;
if (breite && breite>20) b_Breite = breite;
ToolTipp = crossGetObject('ToolTipp');
ToolTippShow = false;
}

function showToolTipp(title,msg,rahmenfarbe,cellpadding,cellspacing,schriftartoben,schriftartunten,textrichtungoben,textrichtungunten,textfarbeoben,textfarbeunten,rahmenstaerke,bgcoloroben,bgcolorunten,rechtslinks,untenoben,schriftgroesseoben,schriftgroesseunten,fettoben,fettunten,rahmenart,breite){
var b_Back;
var relWidth, relHeight;
if (ToolTipp == null) return;
if (breite && breite>20) b_Breite = breite;
else b_Breite=500;
msg = '<table width="' + b_Breite + '" cellpadding="'+cellpadding+'" cellspacing="'+cellspacing+'" style="border:'+rahmenstaerke+' '+rahmenfarbe+' '+rahmenart+';"><tr><td style="border-bottom:'+rahmenstaerke+' solid '+rahmenfarbe+'; border-top:'+rahmenstaerke+' solid '+rahmenfarbe+'; border-left:'+rahmenstaerke+' solid '+rahmenfarbe+'; border-right:'+rahmenstaerke+' solid '+rahmenfarbe+'; padding0px; "><table width="100%" border="0" cellpadding="'+cellpadding+'" cellspacing="'+cellspacing+'"><tr><td bgcolor="'+bgcoloroben+'" align="'+textrichtungoben+'"><span style="font-family:'+schriftartoben+'; font-size: '+schriftgroesseoben+'; font-weight: '+fettoben+'; color:'+textfarbeoben+'; "><b>'+title+'</b></span></th></tr></table><table width="100%" border="0" cellpadding="'+cellpadding+'" cellspacing="'+cellspacing+'"><tr><td bgcolor="'+bgcolorunten+'" align="'+textrichtungunten+'"><span style="font-family:'+schriftartunten+'; font-size: '+schriftgroesseunten+'; font-weight:'+fettunten+'; color:'+textfarbeunten+';">' + msg + '</span></td></tr></table></td></tr></table>'
if (!dir) b_Dir = rechtslinks;
else b_Dir = dir;
relWidth = crossInnerWindowWidth()+ crossGetScroll("x") ;
relHeight = crossInnerWindowHeight() + crossGetScroll("y");
if (crossMouseX + b_Breite + mausabstand > relWidth)
{b_Dir = 1;}
else if (crossMouseX < b_Breite + mausabstand) b_Dir = 0;
b_VDir = untenoben;
if (crossMouseY + 65 > relHeight) b_VDir = 1;
else if (crossMouseY - 65 < 0) b_VDir = 0;
crossWrite(ToolTipp, msg);
ToolTippShow = true;
crossShowObject(ToolTipp);
}

function hideToolTipp(breite) {
if (ToolTipp == null) return;
crossHideObject(ToolTipp);
ToolTippShow=false;
crossMoveTo(ToolTipp, -500, 0);
}

function cursorMove(e) {
var posX, posY;
crossMousePosition(e);

if(ToolTippShow){  
	if(b\_Dir==0){  
		posX = crossMouseX + mausabstand;  
		if (b\_VDir==0) {posY = crossMouseY + mausabstand;}  
		else {posY = crossMouseY - 65;}  
	}else{  
		posX = crossMouseX-b\_Breite-mausabstand;  
		if (b\_VDir==0) {posY = crossMouseY + mausabstand;}  
		else {posY = crossMouseY - 65;}  
	}  
	crossMoveTo(ToolTipp, posX, posY)  
}  

}

var B_Type = new crossBrowserType();
function crossBrowserType() {
this.IE = false;
this.NS4 = false;
this.NS6 = false;
this.id = "";

if (document.all) {this.IE = true; this.id = "IE";}  
else if (document.getElementById) {this.NS6 = true; this.id = "NS6";}  
else if (document.layers) {this.NS4 = true; this.id = "NS4";}  

}

var crossMouseX, crossMouseY;
if (B_Type.NS4) document.captureEvents(Event.MOUSEMOVE);

function crossMousePosition(e) {
if (B_Type.IE) {
crossMouseX=event.x + document.body.scrollLeft;
crossMouseY=event.y + document.body.scrollTop;
}
else {crossMouseX=e.pageX; crossMouseY=e.pageY;}
}

function crossGetObject(id) {
var obj = null;
if (B_Type.IE) obj=document.all[id];
else if (B_Type.NS6) obj=document.getElementById(id);
else if (B_Type.NS4) obj=document.layers[id];
return obj;
}

function crossWrite(obj, text) {
if (B_Type.IE) obj.innerHTML = text;
else if (B_Type.NS6) obj.innerHTML = text;
else if (B_Type.NS4){
obj.document.open();
obj.document.write(text);
obj.document.close();
}
}

function crossInnerWindowWidth() {
var val;
if (B_Type.IE) val=document.body.clientWidth;
else if (B_Type.NS6) val=window.innerWidth;
else if (B_Type.NS4) val=window.innerWidth;
return val;
}

function crossOuterWindowWidth() {
var val;
if (B_Type.IE) val=document.body.offsetWidth;
else if (B_Type.NS6) val=window.outerWidth;
else if (B_Type.NS4) val=window.outerWidth;
return val;
}

function crossInnerWindowHeight() {
var val;
if (B_Type.IE) val=document.body.clientHeight;
else if (B_Type.NS6) val=window.innerHeight;
else if (B_Type.NS4) val=window.innerHeight;
return val;
}

function crossGetScroll(achse) {
var val;
if(!achse || achse == "y"){
if (B_Type.IE) val=document.body.scrollTop;
else if (B_Type.NS6) val=window.pageYOffset;
else if (B_Type.NS4) val=window.pageYOffset;
}else{
if (B_Type.IE) val=document.body.scrollLeft;
else if (B_Type.NS6) val=window.pageXOffset;
else if (B_Type.NS4) val=window.pageXOffset;
}
return val;
}

function crossMoveTo(obj, x, y) {
if (B_Type.IE) {obj.style.pixelLeft=x; obj.style.pixelTop=y;}
else if (B_Type.NS4) {obj.left=x; obj.top=y;}
else if (B_Type.NS6) {obj.style.left=x+"px"; obj.style.top=y+"px";}
}

function crossShowObject(obj) {
if (B_Type.IE || B_Type.NS6) {obj.style.visibility="visible";}
else if (B_Type.NS4) {obj.visibility="show";}
}

function crossHideObject(obj) {
if (B_Type.IE || B_Type.NS6) {obj.style.visibility="hidden";}
else if (B_Type.NS4) {obj.visibility="hide";}
}

</script>

</head>
<body onload="setToolTipp();">
<div name="ToolTipp" id="ToolTipp" style="POSITION:absolute; VISIBILITY:hidden; LEFT:-200px; Z-INDEX: 100"></div>
<body>

</body>