Hi,
ich habe eine kleine Routine geschrieben, die mittels von Grafikbuttons ein Bild in einer Tabelle an und ausschaltet. Leider treten einige Probleme auf, für die ich keine Lösung finden kann
.
1. wenn ich die Buttons mittels <div style="text-align:center; z-index: 2;"> zentriere, sind diese nicht mehr anklickbar
2. Die horizontale Bildausrichtung scheint zu funktionieren (oder gibt es eine bessere Lösung dafür?). Wenn das Browserfenster jedoch kleiner ist als das Tabellenfenster, wird die Grafik nach links verschoben
3. Die vertikale Positionierung funktioniert nicht. Werden z.B. Leerzeilen über der Tabelle eingefügt, verschiebt sich das Bild nicht zusammen mit der Tabelle nach unten
Könnt Ihr mir helfen?
Danke im voraus für Eure Hilfe.
Hier der Code
ich habe eine kleine Routine geschrieben, die mittels von Grafikbuttons ein Bild in einer Tabelle an und ausschaltet. Leider treten einige Probleme auf, für die ich keine Lösung finden kann
.1. wenn ich die Buttons mittels <div style="text-align:center; z-index: 2;"> zentriere, sind diese nicht mehr anklickbar
2. Die horizontale Bildausrichtung scheint zu funktionieren (oder gibt es eine bessere Lösung dafür?). Wenn das Browserfenster jedoch kleiner ist als das Tabellenfenster, wird die Grafik nach links verschoben
3. Die vertikale Positionierung funktioniert nicht. Werden z.B. Leerzeilen über der Tabelle eingefügt, verschiebt sich das Bild nicht zusammen mit der Tabelle nach unten
Könnt Ihr mir helfen?
Danke im voraus für Eure Hilfe.
Hier der Code
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<style type="text/css">
html, body {margin:0; padding:0; height:100%; overflow:hidden;}
div.nscr {height:57px; width:100%; padding-left:0px;}
div.inhalt {margin-left:0px; padding-left:0px; height:93.8%; overflow:auto;}
</style>
<script language="javascript" type="text/javascript">
function aus ()
{
document.getElementById ('preload').style.visibility = 'hidden';
}
function an ()
{
document.getElementById ('preload').style.visibility = 'visible';
}
</script>
<body>
<div class="inhalt">
<p align="center">x</p>
<div align="center">
<div style="position: absolute; width: 800px; height: 500px; z-index: 1; left:50%; margin-left: -400px; top:50%; margin-top: -330px;" id="preload">
<img border="0" src="symbole/foto.jpg" width="220" height="290"></div>
<table border="1" width="800" height="500">
<tr>
<td align="center">
<img border="0" src="symbole/landschaft.jpg" width="690" height="492"></td>
</tr>
</table>
</div>
<div style="text-align:center; z-index: 2;">
<a href="#" Onclick = "an ()"><img border="0" src="symbole/an.gif"></a>
<a href="#" Onclick = "aus ()"><img border="0" src="symbole/aus.gif"></a>
</div>
</div>
<div class="nscr">
</div>