nicht angemeldet
Problem mit onmouseover bei div-container
Hi!
Ich schreibe gerade an dieser Seite:
--
http://hirrsch.hi.funpic.de/test/dashirrsch/php/index.php
--
Wenn ich mit der Mouse über den div-container mit der id "arrows" fahre, werden die divs "arrowr" und "arrowl" auf visible gestellt. Das geschieht über diese Funktion:
-Start-----------------
function sicht (id,status) {
if (status=='false') {document.getElementById(id).style.visibility='hidden';}
if (status=='true') {document.getElementById(id).style.visibility='visible';}
}
-Ende------------------
und mit onmouseover beim div-container:
-Start-----------------
<div id='arrows' class='arrows' onmouseover="sicht('arrowr','true'); sicht('arrowl','true');" onmouseout="sicht('arrowr','false'); sicht('arrowl','false');"/>
...
</div>
-Ende------------------
Das funktioniert auch soweit.
Nun zum Problem:
Jetzt möchte ich die visibility von "div.menu" mit der gleichen Funktion auf "visible" stellen, wenn ich über den div-container "header" fahre.
-Quelltext-Start-------
<style type='text/css'>
[...]
div.menu {
position: absolute;
background: #FF0000; <-- !Nur zur Anschauung gerötet!
height: 200px;
width: 186px;
left: 15px;
visibility: hidden;
}
div.header {
position: relative;
background: #00FF00;
width: 218px;
}
[...]
</style>
<body>
[...]
<div id='header' class='header' onmouseover="sicht('menu','true');" onmouseout="sicht('menu','false');"/>
<span><h1><b>Überschrift</b></h1>
<div id='menu' class='menu'/></div>
</div>
[...]
</body>
-Quelltext-Ende--------
Wenn ich die Funktion "sicht('menu','true');" im "arrows"-container einfüge, erscheint "menu". Warum nicht im "header"-container?
Ich bin total ratlos, vielleicht wisst ihr ja weiter...
mfG Philipp(welt.mensch.status='verzweifelt';)
-
hier nochmal der komplette Quellcode:
<html>
<head>
<style type='text/css'>body {
background: #FFFFFF;
}div.mitte {
margin-left: 50%;
}div.frame {
position: absolute;
background: url(../img/frame.gif) no-repeat;
height: 600px;
width: 500px;
}div.bg {
position: relative;
background: url(../img/bg/bg1.jpg) no-repeat 50% 50%;
height: 600px;
width: 500px;
margin-left: -250px;
}div.text {
position: absolute;
height: 285px;
width: 236px;
left: 150px;
top: 150px;
overflow: auto;
}div.menu {
position: absolute;
background: #FF0000;
height: 200px;
width: 186px;
left: 15px;
visibility: hidden;
}div.arrows {
position: absolute;
width: 186px;
top: 410px;
left: 166px;
}div.header {
position: relative;
background: #00FF00;
width: 218px;
}div.arrowr {
position: absolute;
background: url(../img/arrowr1.gif) no-repeat;
height: 29px;
width: 26px;
left: 160px;
visibility: hidden;
}div.arrowl {
position: absolute;
background: url(../img/arrowl1.gif) no-repeat;
height: 29px;
width: 26px;
visibility: hidden;
}#center div {
text-align: center;
}#schrift span {
color: #F3F3F3;
font: 14px 'Verdana';
}#schrift h1 {
display: block;
color: #FFFFFF;
font: 16px 'Verdana';
}#beschreibung acronym {
color: #D0D0D0;
font: 14px 'Verdana';
}</style>
<?php
$bg_pfad = "../img/bg/";
$max = 0;$dh = opendir($bg_pfad);
while ($datei = readdir($dh)) {
if($datei !== "" &&
$datei !== "." &&
$datei !== ".." &&
!is_dir($datei)) {
$max++;
}
}
?><script type='text/javascript'>
i = 1;
max = <?php echo "$max"; ?>;function sicht (id,status) {
if (status=='false') {document.getElementById(id).style.visibility='hidden';}
if (status=='true') {document.getElementById(id).style.visibility='visible';}
}function tauschen (id,zahl) {
document.getElementById(id).style.backgroundImage='url(../img/'+id+zahl+'.gif)';
}function bg (direction) {
if (direction=='right') {
i++; if (i-1==max) {i=1};
document.getElementById('bg').style.backgroundImage='url(../img/bg/bg'+i+'.jpg)';}
if (direction=='left') {
i--; if (i==0) {i=max};
document.getElementById('bg').style.backgroundImage='url(../img/bg/bg'+i+'.jpg)';}if (i==1) {document.getElementById('text').innerHTML='irre Spiegelung';}
if (i==2) {document.getElementById('text').innerHTML='BSP III';}
}</script>
</head>
<body><div class='mitte'/>
<div id='bg' class='bg'/><div id='center'/>
<div id='schrift'/>
<div class='text'/>
<span><div id='header' class='header' onmouseover="sicht('menu','true'); alert('blubb');" onmouseout="sicht('menu','false');"/>
<h1><b>Überschrift</b></h1>
<div id='menu' class='menu'/></div>
</div><p>Schwer umweht die Abendluft,<br>
fährt grell entlang den erden Farben,<br>
um mich herum erblühet Dämmerlicht,<br>
verheißt ein wenig Ewigkeit,<br>
bis sich erneut am eigen Niedergange tut erlaben.</p><p>Ein Blick zu mir flieht aus dem Wald,<br>
schenkt meinem Dasein Wirklichkeit,<br>
und eilt zurück,<br>
nun ist's der meine,<br>
sucht tastend Augen,<br>
doch erfahret keine....</p><p>Ein Gefühl bricht hervor aus tiefem Holze,<br>
durchflutet mich<br>
ein rasend Strome,<br>
tastet<br>
wühlt sich<br>
tief hinein<br>
ein fühlend Herz,<br>
verschreckt von Leere,<br>
gebiert es Schmerz....</p></span>
</div>
</div>
</div><div class='frame'/>
<div id='center'/>
<div id='arrows' class='arrows' onmouseover="sicht('menu','true'); sicht('arrowr','true'); sicht('arrowl','true');" onmouseout="sicht('menu','false'); sicht('arrowr','false'); sicht('arrowl','false');"/>
<a href="javascript:bg('left')"/><div id='arrowl' class='arrowl' onmouseover="sicht('arrowr','true'); sicht('arrowl','true'); tauschen('arrowl','2');" onmouseout="sicht('arrowr','false'); sicht('arrowl','false'); tauschen('arrowl','1');"/></div></a>
<a href="javascript:bg('right')"/><div id='arrowr' class='arrowr' onmouseover="sicht('arrowr','true'); sicht('arrowl','true'); tauschen('arrowr','2');" onmouseout="sicht('arrowr','false'); sicht('arrowl','false'); tauschen('arrowr','1');"/></div></a>
<br><div id='beschreibung'/><acronym title='mit den Pfeilen kannst du das Bild verändern!'><p id='text'>irre Spiegelung</p></acronym></div>
</div>
</div></div>
</div>
</div></body>
</html> -
Das Problem sind deine Verschachtelten DIVs
Die innen liegenden (auch dein header) werden von den außen liegenden sozusagen überdeckt und können von keinem "mouseover()" mehr erreicht werden.
Normalerweise lässt sich das mittels "z-index" lösen.
Klappt aber bei deinem Beispielcode nicht mehr...Warum schachtelst du überhaupt so viele DIVs? Pack die Styles doch in einen einzigen DIV, oder nimm ne Tabelle zum Positionieren.
----
Das erklärt übrigens auch warum sich die TextArea nicht scrollen lässt.
Gruß,
Bene-
Ich nochmal - funktioniert doch mit z-index,
Musst es nur bei allen umgebenden DIVs angeben:
<style type='text/css'>
body {
background: #FFFFFF;
}div.mitte {
margin-left: 50%;
z-index: 1;
}div.frame {
position: absolute;
background: url(../img/frame.gif) no-repeat;
height: 600px;
width: 500px;
}div.bg {
position: relative;
background: url(../img/bg/bg1.jpg) no-repeat 50% 50%;
height: 600px;
width: 500px;
margin-left: -250px;
z-index: 2;
}div.text {
position: absolute;
height: 285px;
width: 236px;
left: 150px;
top: 150px;
overflow: auto;
z-index: 5;
}div.menu {
position: absolute;
background: #0000FF;
height: 200px;
width: 186px;
left: 15px;
visibility: visible;
z-index: 7;
}div.arrows {
position: absolute;
width: 186px;
top: 410px;
left: 166px;
}div.header {
position: relative;
background: #00FF00;
width: 218px;
z-index: 6;
}div.arrowr {
position: absolute;
background: url(../img/arrowr1.gif) no-repeat;
height: 29px;
width: 26px;
left: 160px;
visibility: hidden;
}div.arrowl {
position: absolute;
background: url(../img/arrowl1.gif) no-repeat;
height: 29px;
width: 26px;
visibility: hidden;
}#center div {
text-align: center;
z-index: 3;
}#schrift span {
color: #F3F3F3;
font: 14px 'Verdana';
}#schrift div {
display: block;
color: #FFFFFF;
font: 16px 'Verdana';
z-index: 4;
}#beschreibung acronym {
color: #D0D0D0;
font: 14px 'Verdana';
}</style>
Greetz,
bene-
Hi Bene!
Sehr vielen Dank dir! Ich muss Tomaten auf den Augen gehabt haben. Tabellen wollte ich nicht zum Positionieren nehmen, weil ich das gesamte Projekt rein in CSS halten wollte. Dass alles ein bisschen kompliziert ist und verschachtelt, muss ich zugeben. Das rührt zum großen Teil daher, dass mir noch während des Projektes neue Ideen gekommen sind, die ich verwirklichen wollte. Wenn die Seite fertig ist sollte ich das noch einmal verinfachen ;-).
Nochmals Danke für die schnelle Hilfe!
mfG Philipp
-
-