Und außerdem wüßte ich trotzdem gerne, wie man das vor HTML5 gemacht hätte?
Früher hat man in etwa solche Späße betrieben: (Das ist jetzt mal "sehr grob zurecht gezimmert" und sollte nicht "in jedem Detail" so einfach übernommen werden!)
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
th, td {
width:10em;
padding:.3em;
}
th {
background-color:blue;
color:#fff;
}
td {
background-color:#ddd;
}
td.details {
display:none;
}
#box {
display:none;
position:absolute;
background-color:#fff;
padding:.3em;
margin-top:1em;
margin-left:2em;
box-shadow: 3px 3px 5px 6px #ccc;
border-radius:.3em;
max-width:200px;
}
.closer {
text-align:right;
background-color:blue;
color:#fff;
margin:-.3em;
margin-bottom:.3em;
padding:.1em;
}
.closer span {
background-color:#fff;
color:black;
border-radius:.1em;
padding-left:.5em;
padding-right:.5em;
}
</style>
<script type="text/javascript">
function LayerPosition (Ereignis) {
//alert(Ereignis.pageX + "px");
var box=document.getElementById("box");
box.style.left = Ereignis.pageX + "px";
box.style.top = Ereignis.pageY + "px";
}
document.onmouseup = LayerPosition;
function show_details(str) {
var box=document.getElementById("box");
box.innerHTML='<div class="closer"><span>x</span></div>' + document.getElementById(str).innerHTML;
box.style.display="block";
//document.onmouseup = false;
}
</script>
</head>
<body >
<table id="test" onload=LayerPosition(this)>
<tr>
<th>Spalte 1</th><th>Spalte 2</th>
</tr>
<tr>
<td onclick="LayerPosition(this); show_details('D_1_1', this)">Foo 11111111</td><td class='details' id='D_1_1'>Ganz wichtige Erläuterung zu Foo 11111111</td>
<td onclick="LayerPosition(this); show_details('D_1_2', this)">Bar 11111111</td><td class='details' id='D_1_2'>Ganz wichtige Erläuterung zu Bar 11111111</td>
</tr>
<tr>
<td onclick="LayerPosition(this); show_details('D_2_1', this)">Foo 22222222</td><td class='details' id='D_2_1'>Ganz wichtige Erläuterung zu Foo 22222222</td>
<td onclick="LayerPosition(this); show_details('D_2_2', this)">Bar 22222222</td><td class='details' id='D_2_2'>Ganz wichtige Erläuterung zu Bar 22222222</td>
</tr>
</table>
<div id="box" onclick="this.style.display='none'">[close] test</div>
</body>
</html>