Fahren Sie mit der Maus auf eines der Beispiele...

Example 1

Example 2

#example2 {
position:absolute;
width:150px;
height:100px;
color:blue;
background-color:#FDF5E6;
text-align:center;
visibility:hidden;
z-index:10;
}

</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
/* Original: Donnie Brewer (brewsky@home.com)
* Web Site: http://www.brewskynet.com/javatest/popup.html
* modified by N8i (www.nightfire.ch) in May 2005
* Script works now with all DOM compliant browsers
*/

//Browser Sniffer
var ie4up = (document.all) ? 1 : 0;
var mozup = (!document.all && document.getElementById) ? 1 : 0;

// Capturing MouseMove
function handlerMM(e) {
mousex = (mozup) ? e.pageX : document.body.scrollLeft+event.clientX
mousey = (mozup) ? e.pageY : document.body.scrollTop+event.clientY
}
if (ie4up || mozup) {
window.document.onmousemove = handlerMM;
}

function ViewData(user,ValueShow) {
document.getElementById(user).style.visibility = ValueShow; // show or hide respective Example
document.getElementById(user).style.left = mousex + 5; // place popup at the mouse X (left) location
document.getElementById(user).style.top = mousey; // place popup at the mouse Y (top) location
}
// End -->
</script>

<!-- Table Definition for Popup -->

<!-- All tables must have there own style sheet assigned to it -->
<!-- Example1 Popup Data -->
<div id="example1">
<table border="yes" bordercolor="#FFA07A" width="148">
<tr valign="middle">
<td height="98" align="center"><font color=Blue>
Your Example1<br>
data will go here!<br><br>
Pretty Cool!!</font>
</td></tr></table>
</div>

<!-- Example2 Popup Data -->
<div id="example2">
<table border="yes" bordercolor="#FFA07A" width="148">
<tr valign="middle">
<td height="98" align="center"><font color=Blue>
Your Example2<br>
data will go here!<br><br>
Pretty Cool!!<br>
</font>
</td></tr></table>
</div>

<!-- End Popup Definitions -->

Donnie Brewer
modified by N8i (www.nightfire.ch)

Kopieren Sie bitte den Code