Hallo,
ich habe vor, meinen Forum-Usern ein paar extra Weihnachtssmilies temporär anzubieten. Da ich meine direkt sichtbare Symbolbar sehr schlicht gehalten habe und zusätliche Smilies in ein extra Smilie-Fenster gepackt habe, das ich nach Sabines Anleitung erstellt habe, habe ich mir überlegt, für die Weihnachtssmilies auch ein extra Fenster zu bauen.
Ein zweites Fenster, was sich unabhängig vom ersten problemlos auf und zumachen lässt habe ich reingebastelt, indem ich hinter alles, was mir nach Funktion aussah, eine 2 geklatscht hab ^^. Allerdings habe ich noch einen kleinen Schönheitsfehler:
Wenn ich das zweite parallel zum ersten öffne, bleibt das erste natürlich auf und verschwindet dahinter. Kann man es einrichten, dass sich das erste automatisch schließt, wenn man das zweite öffnet und umgekehrt?
Hier noch der Code (allerdings aus meinem Testlabor, deshalb ohne Smilies und so)
<script language="javascript">function hidewindow2() { document.getElementById('smiliewindow2').style.visibility = 'hidden';}function showwindow2() { document.getElementById('smiliewindow2').style.visibility = 'visible';}</script><style type="text/css">.swhead { /** Style der Titelleiste **/ background-color:#336633; font-weight:bold; color:#f9f9f9; font-family:Arial; font-size:10pt;}.swbody { /** Style des Fensterinhalts **/ background-color:#f9f9f9; font-weight:normal; font-family:arial; font-size:10pt;}</style><div id="smiliewindow2" style="visibility:hidden; position:absolute; top:100px; left:350px; border:1px solid #003300; padding:0px; text-align:left;"> <!-- Titelleiste --> <div class="swhead" style="width:400px; height:20px; border:none; border-bottom:1px solid black; padding:1px 4px;"> <table width="100%" cellspacing="0" border="0"> <tr> <!-- Titel --> noch mehr Smilies <td align="left" class="swhead">Smilies</td> <!-- Fenstermenu --> <td align="right"><a href="javascript:hidewindow2();"> <img src="http://www.bilder-hochladen.net/files/2en6-14.gif" border="0"> </a> </td> </tr> </table> </div> <!-- Fensterinhalt --> <div class="swbody" style="width:400px; height:200px; border:none; overflow:auto; padding:4px;"> <!-- SMILIES --> smilies </div></div>
<script language="javascript">function hidewindow() { document.getElementById('smiliewindow').style.visibility = 'hidden';}function showwindow() { document.getElementById('smiliewindow').style.visibility = 'visible';}</script><style type="text/css">.swhead { /** Style der Titelleiste **/ background-color:#336633; font-weight:bold; color:#f9f9f9; font-family:Arial; font-size:10pt;}.swbody { /** Style des Fensterinhalts **/ background-color:#f9f9f9; font-weight:normal; font-family:arial; font-size:10pt;}</style><div id="smiliewindow" style="visibility:hidden; position:absolute; top:100px; left:350px; border:1px solid #003300; padding:0px; text-align:left;"> <!-- Titelleiste --> <div class="swhead" style="width:400px; height:20px; border:none; border-bottom:1px solid black; padding:1px 4px;"> <table width="100%" cellspacing="0" border="0"> <tr> <!-- Titel --> <td align="left" class="swhead">Smilies</td> <!-- Fenstermenu --> <td align="right"><a href="javascript:hidewindow();"> <img src="http://www.bilder-hochladen.net/files/2en6-14.gif" border="0"> </a> </td> </tr> </table> </div> <!-- Fensterinhalt --> <div class="swbody" style="width:400px; height:200px; border:none; overflow:auto; padding:4px;"> <!-- SMILIES --> </div></div>
(witzigerweise lässt sich das Smiliefenster eins nur schließen, wenn der Code dafür nach dem des zweiten Fensters steht)
Und die Verlinkung:
<a href="javascript:showwindow()">mehr Smilies</a> <a href="javascript:showwindow2();">noch mehr Smilies</a>