Klaus: mehrere DIVS auf einmal sichtbar machen

Beitrag lesen

hallo moejoe,

ich habe mehrere divs:

<div id="lough1" class="loughD"  ..></div> <div id="lough2" class="loughD"  ..></div> ...

diese möchte ich nun per schleife auf visiblility="hidden" setzen.

<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript"> <!-- function MM_findObj(n, d) { //v4.0   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);   if(!x && document.getElementById) x=document.getElementById(n); return x; }

function MM_changeProp(objName,x,theProp,theValue) { //v3.0   var obj = MM_findObj(objName);   if (obj && (theProp.indexOf("style.")==-1 || obj.style)) eval("obj."+theProp+"='"+theValue+"'"); } //--> </script> </head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="Layer1" style="position:absolute; left:35px; top:40px; z-index:1; width: 190px">   <table width="100%" border="0" cellspacing="3" cellpadding="8">     <tr>       <td bgcolor="#FFCC66" width="90" height="40">11111</td>       <td width="90"> </td>       <td width="90"> </td>     </tr>     <tr>       <td bgcolor="#FFCC66" height="40">aaaaa</td>       <td bgcolor="#FFCC66" bordercolor="#FFCC66">bbbbb</td>       <td bgcolor="#FFCC66" bordercolor="#FFCC66">ccccc</td>     </tr>     <tr>       <td bgcolor="#FFCC66" height="40">xxxxx</td>       <td bgcolor="#FFCC66" bordercolor="#FFCC66">yyyyy</td>       <td bgcolor="#FFCC66" bordercolor="#FFCC66">zzzzz</td>     </tr>   </table> </div> <div id="Layer2" style="position:absolute; left:35px; top:40px; width:190px; z-index:2; height: 132px">   <table width="100%" border="0" cellspacing="3" cellpadding="8">   <tr>       <td width="90" height="40"> </td>       <td bgcolor="#FF9933" width="90">2222</td>       <td width="90"> </td>     </tr>     <tr>       <td bgcolor="#FF9933" height="40">ddd</td>       <td bgcolor="#FF9933">eee</td>       <td bgcolor="#FF9933">fff</td>     </tr>     <tr>       <td bgcolor="#FF9933" height="40">987</td>       <td bgcolor="#FF9933">654</td>       <td bgcolor="#FF9933">321</td>     </tr>   </table> </div> <div id="Layer3" style="position:absolute; left:35px; top:40px; width:190px; height:132px; z-index:3">   <table width=100%" border="0" cellspacing="3" cellpadding="8">   <tr>       <td width="90" height="40"> </td>       <td width="90"> </td>       <td width="90" bgcolor="#CC6600">3333</td>     </tr>     <tr>       <td bgcolor="#CC6600" height="40">gggg</td>       <td bgcolor="#CC6600">hhhh</td>       <td bgcolor="#CC6600">jjjj</td>     </tr>     <tr>       <td bgcolor="#CC6600" height="40"><<<</td>       <td bgcolor="#CC6600">===</td>       <td bgcolor="#CC6600">>>></td>     </tr>   </table> </div> <div id="Layer4" style="position:absolute; left:20px; top:200px; width:486px; height:121px; z-index:4">   <table width="100%" border="0" cellspacing="3" cellpadding="8"> <tr>       <td>         <h3>per JavaScript<br>           mehrere Ebenen gleichzeitig<br>           wechseln/unsichtbar machen</h3>       </td>     </tr>     <tr>       <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+3','LAYER');MM_changeProp('Layer2','','style.zIndex','+1','LAYER');MM_changeProp('Layer3','','style.zIndex','+2','LAYER')">Layer1         gelb nach oben</a></td>     </tr>     <tr>       <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');MM_changeProp('Layer2','','style.zIndex','+3','LAYER');MM_changeProp('Layer3','','style.zIndex','+2','LAYER')">Layer2         blau nach oben</a></td>     </tr>     <tr>       <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');MM_changeProp('Layer2','','style.zIndex','+2','LAYER');MM_changeProp('Layer3','','style.zIndex','+3','LAYER')">Layer3         rot nach oben !</a></td>     </tr>     <tr>       <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');MM_changeProp('Layer2','','style.zIndex','-1','LAYER');MM_changeProp('Layer3','','style.zIndex','-2','LAYER')">Layer1         ist alleine sichtbar !</a> (Layer 2+3 sind unsichtbar)</td>     </tr>     <tr>       <td><a href="javascript:;" onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');MM_changeProp('Layer2','','style.zIndex','-1','LAYER');MM_changeProp('Layer3','','style.zIndex','+2','LAYER')">Layer1+3         sind sichtbar !</a> (Layer 2 ist unsichtbar)</td>     </tr>     <tr>       <td>         <h3>BrowserTest</h3>         <ul>           <li>OPERA 7: korrekt</li>           <li>OPERA 6: <i>macht die Layer mit '-x' <font color="#FF0000">nicht</font>             unsichtbar<br>             </i></li>         </ul>         <ul>           <li>NETSCAPE 7: korrekt</li>           <li>NETSCAPE 6.2: korrekt</li>           <li>NETSCAPE 4.75: <i>kennt diese DHTML-Sprache nicht !</i><i><br>             </i></li>         </ul>         <ul>           <li>INTERNET EXPLORER 5.5: <i>macht die Layer mit '-x' <font color="#FF0000">nicht</font>             unsichtbar</i></li>         </ul>       </td> </tr> <tr>    <td>         <h3>JavaScript - Quelltext</h3>         <p>Der Term <a href="javascript:;"> markiert einen EventHandler           ohne in der Statusleiste eine lange Hyroglyphen-Zeile als Link-Adresse           anzuzeigen.</p>       </td> </tr> <tr>    <td>         <p><... onClick="MM_changeProp('Layer1','','style.zIndex','+1','LAYER');...           > gibt die JavaScript-Eigenschaften an: lege 'Layer1' auf '+1'. Das           Pluszeichen beschreibt, dass der Layer auf die sichtbare Ebene gelegt           wird, das Minuszeichen beschreibt, dass der Layer auf die unsichtbare           Ebene gelegt wird.</p>         <p>'+' und '-' sind hier trotz JavaScript <font color="#FF0000">keine</font>           mathematischen Anweisungen zum Addieren und Subtrahieren!</p>         <p>...'Layer3'...'+2' heißt somit: Lege den Layer3 sichtbar auf           Ebene2.</p>         <p>Die Ebene '+1' ist somit die unterste sichtbare Ebene. Die Ebene '+2'           liegt darüber und kann sie folglich überdecken.</p>       </td> </tr> <tr><td>         <h3>Anmerkung im Layout</h3>         <p>Hier wird sehr deutlich, dass die historische Formatierung mit <tags>           ungenau die Tabellen layoutet. > NUR noch mit CSS gestalten! <         <p>Das soll jedoch nicht unbedingt Gegenstand dieses HTML-Kodes sein !       </td><tr> </table> </div> </body> </html>

MoinMoin Klaus Hab die halbe Nacht durchgetüftelt, weil mich dieses Ebenen-Problem sehr beschäftigt und endlich hat. Die Lösung habe ich teilweise per Dreamweaver gefunden, müsste folglich gehörig aufräumen, aber immerhin: Das Verstecken/Sichtbarmachen mache ich heute noch.