Mit folgendem Script kann man einen CSS-Generator realisieren. Wer auf seiner Homepage einen Service anbieten möchte, wird mit diesem Script sicher Erfolg haben. Das Einzige, was an diesem Script geändert werden sollte, sind die Farben. Weitere Änderungen können das Script unbrauchbar machen. Das Script funktioniert mit dem Internet Explorer und dem Netscape Navigator. Los geht's:
zwischen <HEAD> und </HEAD> <style> #header {color:#ffffff; font: italic bold 20pt, arial} #wtext {color:#ffffff; font: bold 10pt, arial; text-decoration: underline} #inp01 {border: 0px solid; background-color: #CCCCFF; font: 10pt, arial} #inp02 {border: 2px solid; background-color: #CCCCFF; font: 10pt, arial; border-style:inset} #white {color:#ffffff; font: 10pt, arial} </style> <script> function stil() {if (schriftstil.options[schriftstil.selectedIndex].value=='normal') {document.all.beispieltext.style.fontWeight='' document.all.beispieltext.style.fontStyle='' document.all.beispieltext.style.fontStyle='normal'} if (schriftstil.options[schriftstil.selectedIndex].value=='italic') {document.all.beispieltext.style.fontWeight='' document.all.beispieltext.style.fontStyle='' document.all.beispieltext.style.fontStyle='italic'} if (schriftstil.options[schriftstil.selectedIndex].value=='bold') {document.all.beispieltext.style.fontWeight='' document.all.beispieltext.style.fontStyle='' document.all.beispieltext.style.fontWeight='bold'} if (schriftstil.options[schriftstil.selectedIndex].value=='bold-italic') {document.all.beispieltext.style.fontWeight='' document.all.beispieltext.style.fontStyle='' document.all.beispieltext.style.fontWeight='bold' document.all.beispieltext.style.fontStyle='italic'}} function quelltext() {Textart=document.all.beispieltext.style.fontFamily Schriftstil='' if (document.all.beispieltext.style.fontStyle!='') Schriftstil=document.all.beispieltext.style.fontStyle if (document.all.beispieltext.style.fontWeight!='') Schriftstil=document.all.beispieltext.style.fontWeight if (document.all.beispieltext.style.fontWeight=='bold' && document.all.beispieltext.style.fontStyle=='italic') Schriftstil=document.all.beispieltext.style.fontWeight+' '+document.all.beispieltext.style.fontStyle Textgröße=document.all.beispieltext.style.fontSize Zeichenabstand=document.all.beispieltext.style.letterSpacing Textdekoration=document.all.beispieltext.style.textDecoration Textfarbe=document.all.beispieltext.style.color Hintergrundfarbe=document.all.beispieltext.style.backgroundColor Rahmen=document.all.beispieltext.style.border Mauszeiger=document.all.beispieltext.style.cursor quelltext=open("","text","scrollbars=no"); quelltext.resizeTo(800,200); quelltext.moveTo(0,0); quelltext.focus(); quelltext.document.open() quelltext.document.write('<body bgcolor=f0f0f0 onUnload=opener.location.reload()>') quelltext.document.write('<title>--> CSS-Generator 1.0 <-- [quelltext]</title>') quelltext.document.write('<span style="font: 10 pt verdana; color:red"><code><style>') quelltext.document.write('#css_text {font: '+Schriftstil+' '+Textgröße+' , '+Textart+'; letter-spacing: '+Zeichenabstand+'; text-decoration: '+Textdekoration+';') quelltext.document.write(' color: '+Textfarbe+'; background-color: '+Hintergrundfarbe+'; border: '+Rahmen+'; cursor: '+Mauszeiger+'}') quelltext.document.write('</style>') quelltext.document.write('<span id=css_text>dies hier ist ein beispieltext</span></code>') quelltext.document.write('<span style="font: 08pt; color:black">markieren sie den text, klicken sie rechts auf-><i>kopieren/copy</i>') quelltext.document.write('klicken sie in ihrem editor-programm rechts auf -><i>einfügen/paste</i>') quelltext.document.write('<div align=right style="position:absolute; left: 705; top:147"><input type=button value=schließen onclick=self.close()></div>') quelltext.document.close()} </script> <script> function noerror() {return true} window.onerror=noerror </script>zwischen <BODY> und </BODY> an die gewünschte Stelle <center> <table width=500 border=0 cellpadding=0 cellspacing=0 style="border: 2px solid; border-color: #0066ff"> <tr> <td bgcolor=#0066FF colspan=3 align=center><span id=header>--> CSS-Generator 1.0 <--</span></td> </tr> <tr> <td bgcolor=#000066 id=white>Texttart</td> <td bgcolor=#000066 id=white><select name=schriftart size=1 id=inp01 onchange="document.all.beispieltext.style.fontFamily=schriftart.options[schriftart.selectedIndex].value; schriftstil.focus()"> <option value="arial"> Arial <option value="comic sans ms"> Comic Sans MS <option value="impact"> Impact <option value="helvetica"> Helvetica <option value="tahoma"> Tahoma <option value="times new roman"> Times New Roman <option value="verdana"> Verdana </select></td> </tr> <tr> <td bgcolor=#000066 id=white>Textstil</td> <td bgcolor=#000066 id=white><select name=schriftstil size=1 id=inp01 onchange="stil();schriftsize.focus(); schriftsize.select()"> <option value="normal"> normal <option value="italic"> kursiv <option value="bold"> fett <option value="bold-italic"> fett-kursiv </select></td> </tr> <tr> <td bgcolor=#000066 id=white>Textgröße</td> <td bgcolor=#000066 id=white><input type=text name=schriftsize size=3 id=inp02 maxlength=3 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.fontSize=schriftsize.value; zeichenabstand.focus(); zeichenabstand.select()}"></td> <tr> <td bgcolor=#000066 id=white>Zeichenabstand</td> <td bgcolor=#000066 id=white><input type=text name=zeichenabstand size=3 id=inp02 maxlength=3 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.letterSpacing=zeichenabstand.value; textdekoration.focus()}"></td> </tr> <tr> <td bgcolor=#000066 id=white>Textdekoration</td> <td bgcolor=#000066 id=white><select name=textdekoration size=1 id=inp01 onchange="document.all.beispieltext.style.textDecoration=textdekoration.options[textdekoration.selectedIndex].value; textfarbe_r.focus(); textfarbe_r.select()"> <option value="none"> normal <option value="underline"> unterstrichen <option value="overline"> überstrichen <option value="line-through"> durchgestrichen <br /> <option value="underline overline"> unterstrichen-überstrichen <option value="underline line-through"> unterstrichen-durchgestrichen <option value="line-through overline"> überstrichen-durchgestrichen <option value="line-through underline overline"> unterstrichen-überstrichen-durchgestrichen </select></td> </tr> <tr> <td bgcolor=#000066 id=white valign=top> Texttfarbe</td> <td bgcolor=#000066 id=white><input type=text name=textfarbe_r size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {textfarbe_g.focus(); textfarbe_g.select()}"> <input type=text name=textfarbe_g size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {textfarbe_b.focus(); textfarbe_b.select()}"> <input type=text name=textfarbe_b size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.color=textfarbe_r.value+textfarbe_g.value+textfarbe_b.value; bg_r.focus(); bg_r.select()}"> rot grün blau (z.B. 00 66 FF)</td> </tr> <tr> <td bgcolor=#000066 id=white valign=top>Hintergrundfarbe</td> <td bgcolor=#000066 id=white><input type=text name=bg_r size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {bg_g.focus(); bg_g.select()}"> <input type=text name=bg_g size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {bg_b.focus(); bg_b.select()}"> <input type=text name=bg_b size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.backgroundColor=bg_r.value+bg_g.value+bg_b.value; rahmentyp.focus()}"> rot grün blau (z.B. 00 66 FF)</td> </tr> <tr> <td bgcolor=#000066 id=white>Rahmentyp</td> <td bgcolor=#000066 id=white><select name=rahmentyp size=1 id=inp01 onchange="document.all.beispieltext.style.borderStyle=rahmentyp.options[rahmentyp.selectedIndex].value; rahmenwidth.focus(); rahmenwidth.select()"> <option value="none"> kein rand <option value="dotted"> gepunktet <option value="dashed"> gestrichelt <option value="solid"> durchgezogen <option value="double"> doppelt <option value="groove"> Draufklebe-Effekt <option value="ridge"> Bilderrahmen-Effekt <option value="inset"> 3D nach innen <option value="outset"> 3D nach außen </select></td> </tr> <tr> <td bgcolor=#000066 id=white>Rahmenstärke</td> <td bgcolor=#000066 id=white><input type=text name=rahmenwidth size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.borderWidth=rahmenwidth.value; b_r.focus(); b_r.select()}"></td> </tr> <tr> <td bgcolor=#000066 id=white valign=top>Rahmenfarbe</td> <td bgcolor=#000066 id=white><input type=text name=b_r size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {b_g.focus(); b_g.select()}"> <input type=text name=b_g size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {b_b.focus(); b_b.select()}"> <input type=text name=b_b size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.backgroundColor=b_r.value+b_g.value+b_b.value; cursor.focus()}"> rot grün blau (z.B. 00 66 FF)</td> </tr> <tr> <td bgcolor=#000066 id=white>Mauszeiger</td> <td bgcolor=#000066 id=white><select name=cursor size=1 id=inp01 onchange="document.all.beispieltext.style.cursor=cursor.options[cursor.selectedIndex].value; document.all.beispieltext.focus()"> <option value="default"> normal <option value="hand"> Hand <option value="crosshair"> Präzision <option value="text"> Textfeld <option value="wait"> Sanduhr <option value="help"> Hilfe <option value="move"> Verschiebungs-Kreuz <option value="n-resize"> Verschiebungspfeil (nach oben) <option value="ne-resize"> Verschiebungspfeil (nach oben rechts) <option value="e-resize"> Verschiebungspfeil (nach rechts) <option value="se-resize"> Verschiebungspfeil (nach unten rechts) <option value="s-resize"> Verschiebungspfeil (nach unten) <option value="w-resize"> Verschiebungspfeil (nach links) <option value="nw-resize"> Verschiebungspfeil (nach link oben) </select></td> </tr> <tr> <td colspan=2 style="border-top: 2px solid; border-color: #0060ff"> </td> </tr> <tr> <td colspan=2 align=center><span id=beispieltext style="font: 10pt; decoration: none; border:; border-color:; height=20%; margin:10; margin-top:0">dies hier ist ein beispieltext</span> <span id=wtext style="background-color:#0066ff; font: 10pt, arial; width=500"><b style="cursor:hand" onclick=quelltext() tabindex=0>quellcode erstellen</span></td> </tr> </table>