Jörg Reinholz: Wie fasse ich meine Klassen zusammen?

Beitrag lesen

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>

Jörg Reinholz