nicht angemeldet
transparente divs
hallo zusammen,
ich habe das problem, das mit unten stehendem codeschnipsel die divs über den weiter unten stehenden divs immer transaprent werden. sprich: dort, wo ein link steht, scheint dieser link durch den hintergrund des aufklapp-divs durch. wie kann man das umgehen?
wirsing
<script language="javascript">
<!---
function zeige_inhalt(id,inhalt,y,x)
{
if (document.getElementByID)
{
document.getElementById(id).style.visibility = "visible";
document.getElementById(id).style.top = y;
document.getElementById(id).style.left = x;
document.getElementById(id).style.width = 150;
document.getElementById(id).style.height = 150;
document.getElementById(id).style.value = inhalt;
}
else
{
document.all(id).style.visibility = "visible";
document.all(id).style.top = y;
document.all(id).style.left = x;
document.all(id).style.width = 150;
document.all(id).style.height = 150;
document.all(id).style.value = inhalt;
}
}
function verstecke_inhalt(id)
{
if (document.getElementById)
{
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.top = 0;
document.getElementById(id).style.left = 0;
}
else
{
document.all(id).style.visibility = "hidden";
document.all(id).style.top = 0;
document.all(id).style.left = 0;
}
}
//-->
</script>
<!--- 1. div --->
<tr>
<td valign="top"><a name="bla1859"><img src="http://uk-portal.bank.dresdner.net/images/quadrat.gif"> KuW</td>
<td valign="top"></td>
<td valign="top">
<div id="blubb1859" style="position:relative;z-index:0"><a href="#bla1859" onclick="zeige_inhalt('1859',event.y,event.x)">Denktagebücher Hannah Arendt</a><div id="1859" style="z-index:10;position:absolute;width:0px;height:0px;top:0px;left:0px;visibility:hidden"><table width=100% height=100% style="color:#FFFFFF;background-color:#666666;z-index:20"><tr><td valign=top>Präsentation mit Lesung</td></tr><tr><td valign=bottom align=right><a href="javascript:verstecke_inhalt('1859');" style="color:#FFFFFF;background-color:#666666;font-size:9px;z-index:20">Fenster schließen</a></td></tr></table></div></div></td>
<td valign="top">Dresden/Frankfurt</td>
<td valign="top"></td>
</tr>
<tr>
<td colspan="5"><img src="http://uk-portal.bank.dresdner.net/images/999999.jpg" width="100%" height="1"></td>
</tR>
<!--- ende 1. div --->
<!--- 2. div --->
<tr>
<td valign="top"><a name="bla1859"><img src="http://uk-portal.bank.dresdner.net/images/quadrat.gif"> KuW</td>
<td valign="top"></td>
<td valign="top">
<div id="blubb1859" style="position:relative;z-index:0"><a href="#bla1859" onclick="zeige_inhalt('1859',event.y,event.x)">Denktagebücher Hannah Arendt</a><div id="1859" style="z-index:10;position:absolute;width:0px;height:0px;top:0px;left:0px;visibility:hidden"><table width=100% height=100% style="color:#FFFFFF;background-color:#666666;z-index:20"><tr><td valign=top>Präsentation mit Lesung</td></tr><tr><td valign=bottom align=right><a href="javascript:verstecke_inhalt('1859');" style="color:#FFFFFF;background-color:#666666;font-size:9px;z-index:20">Fenster schließen</a></td></tr></table></div></div></td>
<td valign="top">Dresden/Frankfurt</td>
<td valign="top"></td>
</tr>
<tr>
<td colspan="5"><img src="http://uk-portal.bank.dresdner.net/images/999999.jpg" width="100%" height="1"></td>
</tR>
<!--- ende 2. div --->
-
hallo wirsing
Ins Auge springt folgendes
<!--- 1. div --->
<div id="blubb1859" style="position:relative;z-index:0"><div id="1859" style="z-index:10;position:absolute;width:0px;height:0px;top:0px;left:0px;visibility:hidden"></div></div><div id="blubb1859" style="position:relative;z-index:0"><div id="1859" style="z-index:10;position:absolute;width:0px;height:0px;top:0px;left:0px;visibility:hidden"></div></div>
Nun ist aber die id wirklich eine ID, also sollte sie für zwei verschiedene Elemente auch wirklich verschieden sein.
Welches deiner 4 divs soll "document.getElementById(id)" denn auswählen?
so long
-
hallo wirsing
Ins Auge springt folgendes
<!--- 1. div --->
<div id="blubb1859" style="position:relative;z-index:0"><div id="1859" style="z-index:10;position:absolute;width:0px;height:0px;top:0px;left:0px;visibility:hidden"></div></div><div id="blubb1859" style="position:relative;z-index:0"><div id="1859" style="z-index:10;position:absolute;width:0px;height:0px;top:0px;left:0px;visibility:hidden"></div></div>
Nun ist aber die id wirklich eine ID, also sollte sie für zwei verschiedene Elemente auch wirklich verschieden sein.
Welches deiner 4 divs soll "document.getElementById(id)" denn auswählen?
so long
wo du recht hast ... allerdings bin ich nicht zu blöd dafür, nur zu doof zum abtippen :-)) das 2. div heißt natürlich anders (im beispiel "blubb1860"). die seite wird dynamisch zusammegebaut undbeim zusammenbauen wird der name für die einzelnen "blubb"- bzw. "bla"-divs immer eins hochgesetzt.
-
hallo wirsing
<div id="blubb1859" style="position:relative;z-index:0"><div id="1859" style="z-index:10;position:absolute;width:0px;height:0px;top:0px;left:0px;visibility:hidden"></div></div>
<div id="blubb1859" style="position:relative;z-index:0"><div id="1859" style="z-index:10;position:absolute;width:0px;height:0px;top:0px;left:0px;visibility:hidden"></div></div>
so long
wo du recht hast ... allerdings bin ich nicht zu blöd dafür,
Das wollte ich dir auch nicht unterstellen.
nur zu doof zum abtippen :-)) das 2. div heißt natürlich anders (im beispiel "blubb1860").
ok mit blub und bla, aber was ist mit denen ganz innen id="1859" ?
-
ok mit blub und bla, aber was ist mit denen ganz innen id="1859" ?
für die gilt das gleiche, die namen werden dynamisch zusmmen mit dem div erzeugt. wobei das innen ja nur die übergabe des namens an die funktionen ist.
-
-
-
-
hallo zusammen,
manchmal sind es Kleinigkeiten:
1.
function zeige_inhalt(id,inhalt,y,x)
{
if (document.getElementByID)
...wird !nie! erreicht, da das getElementById heissen muss.
2. Definierst du die Funktion mit 4 Parametern, lieferst beim Aufruf aber nur drei.
ok hab deinen Code jetzt soweit geändert, damit ich das eigentliche Problem erkennen kann.
1. In Opera sind die "Detail-Fenster" nicht wie gewünscht bzgl Größe und Handling (der schliessen-link geht nicht).
2. so gehts zumindest im IE:
<style type="text/css">
<!--
div.linkText {position:relative; }
#blubb1859 {z-index:1; }
#blubb1860 {z-index:0; }
div.Detail { z-index:2;
position:absolute;
width:150px;height:150px;top:0px;left:0px;
visibility:hidden;
}
-->
</style>
</head><body>
<!--- 1. div --->
<div id="blubb1859" class="linkText" >
<a href="#bla1859" onclick="zeige_inhalt('1859','',window.event.y,window.event.x)">Denktagebücher Hannah Arendt</a>
<div id="1859" class="Detail">
<table width=100% height=100% style="color:#FFFFFF;background-color:#666666;z-index:20">
<tr><td valign=top>Präsentation mit Lesung</td></tr><tr><td valign=bottom align=right><a href="javascript:verstecke_inhalt('1859');" style="color:#FFFFFF;background- color:#666666;font-size:9px;z-index:20">Fenster schließen</a></td></tr></table>
</div></div><div id="blubb1860" class="linkText"><a href="#bla1859" onclick="zeige_inhalt('1860','',window.event.y,window.event.x)">
Denktagebücher Hannah Berendt</a>
<div id="1860" class="Detail">
<table width=100% height=100% style="color:#FFFFFF;background-color:#666666;z-index:20">
<tr><td valign=top>Präsentation ohne Lesung</td></tr><tr><td valign=bottom align=right><a href="javascript:verstecke_inhalt('1860');" style="color:#FFFFFF;background- color:#666666;font-size:9px;z-index:20">Fenster schließen</a></td></tr></table>
</div></div>
<!--- ende 2. div --->
</div>Warum das so ist, kann ich dir nicht erklären,
ich orakle mal dass der z-index nur innerhalb der Elternelemente eine Rolle spielt, also wenn blubb1859 z-index:1 ist 1859 mit z-index:2 "drüber".
Aber blubb1860 lag (bei dir) auf einer Ebene mit blubb1859 und das hat er dann über 1859 gemalt.Zusätzliche Vorschläge
window.event kannst du auch im event-handler abfragen, musst du nicht mit übergeben.
Stylesheets verwenden wie oben, zumindest die style-angaben in den <head> packen mit
<style type="text/css">
Klassen definieren etc. spart code! und macht es überschaubar!
größe der Divs muss nicht geändert werden, auf hiddden, visible seten reicht.