nicht angemeldet
wie sieht es da mit browserkompatibilität aus?
Klappt gut in NS 7.0. Das Positionieren der Grafik haut aber nicht hin im IE 5.
Ich poste dir mal den Source, kannst ihn gerne verwenden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style type="text/css"> <!-- body { font-size:0.9em; font-family:arial, sans-serif } p { padding:0 } td { text-align:center; vertical-align:middle; } //--> </style>
<script language="JavaScript" type="text/javascript"> <!-- // BILD AM URSPRUNGSORT UNSICHTBAR MACHEN // document.write( "<style type='text/css'>img.versteckt { visibility:hidden }</style>" ); var pingu_ri = 'S'; // Richtung S - O - N - W var pingu_x, pingu_maxx, pingu_minx; // aktuelle, maximale, minimale Pixel var pingu_y, pingu_maxy, pingu_miny;
var pingu_w = 10; // 100 waagerechte Schritte pro sec var pingu_s = 20; // 50 senkrechte Schritte pro sec var pingu_wp = 4; // waagerechte Pixel pro Schritt var pingu_sp = 4; // senkrechte Pixel pro Schritt
function setTable(proz) { document.getElementById('table').style.width = proz +"%"; pingu_x = document.getElementById('table').offsetLeft + document.getElementById('zelle22').offsetLeft; pingu_minx = pingu_x; pingu_maxx = document.getElementById('table').offsetLeft + document.getElementById('zelle22').offsetLeft + document.getElementById('zelle22').offsetWidth -47; pingu_y = document.getElementById('table').offsetTop + document.getElementById('zelle22').offsetTop; pingu_miny = pingu_y; pingu_maxy = document.getElementById('table').offsetTop + document.getElementById('zelle22').offsetTop + document.getElementById('zelle22').offsetHeight -55;
} function StartPingu() { window.document.images['pingu'].style.marginLeft = pingu_x; window.document.images['pingu'].style.marginTop = pingu_y; aktiv = window.setInterval('MovePingu()',pingu_s); } function MovePingu() { window.document.getElementsByName('x')[0].value = pingu_minx +' / '+pingu_x +' / '+pingu_maxx; window.document.getElementsByName('y')[0].value = pingu_miny +' / '+pingu_y +' / '+pingu_maxy; if ( pingu_ri == 'O' ) { pingu_x = pingu_x +pingu_wp; if ( pingu_x < pingu_maxx ) window.document.images['pingu'].style.marginLeft = pingu_x; else { window.clearInterval(aktiv); // Stop pingu_ri = 'N'; // neue Richtung aktiv = window.setInterval('MovePingu()',pingu_s); // neue Geschwindigkeit } } if ( pingu_ri == 'W' ) { pingu_x = pingu_x -pingu_wp; if ( pingu_x > pingu_minx ) window.document.images['pingu'].style.marginLeft = pingu_x; else { window.clearInterval(aktiv); // Stop pingu_ri = 'S'; // neue Richtung aktiv = window.setInterval('MovePingu()',pingu_s); // neue Geschwindigkeit } } if ( pingu_ri == 'S' ) { pingu_y = pingu_y +pingu_sp; if ( pingu_y < pingu_maxy ) window.document.images['pingu'].style.marginTop = pingu_y; else { window.clearInterval(aktiv); // Stop pingu_ri = 'O'; // neue Richtung aktiv = window.setInterval('MovePingu()',pingu_w); // neue Geschwindigkeit } } if ( pingu_ri == 'N' ) { pingu_y = pingu_y -pingu_sp; if ( pingu_y > pingu_miny ) window.document.images['pingu'].style.marginTop = pingu_y; else { window.clearInterval(aktiv); // Stop pingu_ri = 'W'; // neue Richtung aktiv = window.setInterval('MovePingu()',pingu_w); // neue Geschwindigkeit } } } //--> </script>
</head>
<body onLoad="javascript:StartPingu()">
<p id='info' style='background-color:#faa'>X-Wert: <input type='text' name='x' value='' style='border:none;width:8em'> Y-Wert: <input type='text' name='y' value='' style='border:none;width:8em'> <a href='javascript:window.clearInterval(aktiv)'>Stop</a> <a href='javascript:StartPingu()'>Weiter</a> Tabelle = <a href='javascript:setTable( 50)'>50%</a> <a href='javascript:setTable( 80)'>80%</a> <a href='javascript:setTable(100)'>100%</a> <a href='javascript:setTable(120)'>120%</a></p>
<script> var breit = document.getElementById('info').offsetWidth; document.write( "<img src='../img/rot.gif' style='width:"+breit+"px; height:2px'>"); document.write( "<p>Dieser rote Absatz ist "+breit+" Pixel breit</p>"); </script> <br>
<table id='table' width=80%> <tr> <td id='zelle11' width=40% style='border:1px solid #00a'>11</td> <td id='zelle12' width=50% style='border:1px solid #080'>12</td> <td id='zelle13' width=10% style='border:1px solid #000'>13</td> </tr> <tr style='height:250px'> <td id='zelle21' width=40% style='border:1px solid #808'>21</td> <td id='zelle22' width=50% style='border:1px solid #f00;background-color:#fee'>22 <img src='../img/logo_linux.gif' name='pingu2' style='position:absolute;left:0;top:100; width:47px;height:55px'><!-- 95x110 --> </td> <td id='zelle23' width=10% style='border:1px solid #888'>23</td> </tr> <tr> <td id='zelle31' width=40% style='border:1px solid #aa0'>31</td> <td id='zelle32' width=50% style='border:1px solid #088'>32</td> <td id='zelle33' width=10% style='border:1px solid #ccc'>33</td> </tr> </table> <script> var breit = document.getElementById('table').offsetWidth; document.write( "<img src='../img/rot.gif' style='width:"+breit+"px; height:2px'>"); document.write( "<p>Diese Tabelle ist "+breit+" Pixel breit</p>"); </script>
<img src='../img/logo_linux.gif' name='pingu' style='position:absolute;left:0;top:0; width:47px;height:55px'><!-- 95x110 -->
<table border=1> <tr><td> </td><td>Ecke x</td><td>Ecke y</td><td>Breit</td><td>Hoch</td></tr>
<script> document.write( "<tr><td>Tabelle </td><td>"+document.getElementById('table').offsetLeft +"</td><td>"+document.getElementById('table').offsetTop +"</td><td>"+document.getElementById('table').offsetWidth +"</td><td>"+document.getElementById('table').offsetHeight +"</td></tr>"); document.write( "<tr><td>Zelle 11 </td><td>"+document.getElementById('zelle11').offsetLeft +"</td><td>"+document.getElementById('zelle11').offsetTop +"</td><td>"+document.getElementById('zelle11').offsetWidth +"</td><td>"+document.getElementById('zelle11').offsetHeight+"</td></tr>"); document.write( "<tr><td>Zelle 22 </td><td>"+document.getElementById('zelle22').offsetLeft +"</td><td>"+document.getElementById('zelle22').offsetTop +"</td><td>"+document.getElementById('zelle22').offsetWidth +"</td><td>"+document.getElementById('zelle22').offsetHeight+"</td></tr>");
pingu_x = document.getElementById('table').offsetLeft + document.getElementById('zelle22').offsetLeft; pingu_minx = pingu_x; pingu_maxx = document.getElementById('table').offsetLeft + document.getElementById('zelle22').offsetLeft + document.getElementById('zelle22').offsetWidth -47; pingu_y = document.getElementById('table').offsetTop + document.getElementById('zelle22').offsetTop; pingu_miny = pingu_y; pingu_maxy = document.getElementById('table').offsetTop + document.getElementById('zelle22').offsetTop + document.getElementById('zelle22').offsetHeight -55; </script> </table>
<table border=1><tr><td>Hallo</td><td> <div style="position:relative; width:300px; height:300px;border:1px solid #060">Hallo <img src='../img/logo_linux.gif' name='pingu' style='position:absolute; left:0; top:0; border:none; width:3em'> </div> </td></tr></table>
</body> </html>