Das folgende Javascript von unserem User Frithjof stellt eine Art Grafikprogramm zur Verfügung, welches ihr natürlich auch wieder auf eurer eigenen Homepage einbinden könnt.

Neben den verschiedenen Farben könnt ihr auch verschiedene Zeichenstile bzw. Werkzeuge auswählen.

Pinsel Viereck Sprühen

Helligkeit der Farbe X

Breite X

Art X

Breite X

Werkzeug

+

Malfläche

700x300

Hintergrundfarbe X

Farbe

Aktuelle Farbe:

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- document.onmousedown = los; document.onmouseup = aufhor; document.onmousemove = zeichne; var fach_gros_stat = "klein"; var werk = "pinsel"; var farb = "#000000"; var hell_farb = "#000000"; var stat = "no"; var breit = "10"; var breit_fach = 700; var hoch_fach = 700; var art_viereck = "voll"; var los_links; var los_rechts; var aufhor_links; var aufhor_rechts; var actual_text; var id_vier; var hinter = "#FFFFFF"; var werkzeugkasten = new Array(3); werkzeugkasten[0] = "pinsel"; werkzeugkasten[1] = "vier"; werkzeugkasten[2] = "spruh"; function ander(){ if(stat=="no"){ stat = "gros_fach"; } else{ stat = "no"; } } function art(wert){ art_viereck = wert; sichtbar("art_vier", "hidden"); } function breite(wert){ breit = wert; sichtbar("breite_pinsel", "hidden"); sichtbar("breite_spruh", "hidden"); } function los(position){ stat = "yes"; xwert = (position) ? position.pageX : window.event.offsetX; ywert = (position) ? position.pageY : window.event.offsetY; if(werk=="vier"){ if(fach_gros_stat!="gros"){ los_links = (xwert-10); los_top = (ywert-100); } else{ los_links = xwert; los_top = ywert; } } } function aufhor(position){ stat = "no"; xwert = (position) ? position.pageX : window.event.offsetX; ywert = (position) ? position.pageY : window.event.offsetY; if(werk=="vier"){ if(fach_gros_stat!="gros"){ aufhor_links = (xwert-10); aufhor_top = (ywert-100); } else{ aufhor_links = xwert; aufhor_top = ywert; } var kasten = document.getElementById("fach"); var newDiv = document.createElement("div"); newDiv.style.position = "absolute"; newDiv.style.width = (aufhor_links-los_links)+'px'; newDiv.style.height = (aufhor_top-los_top)+'px'; newDiv.style.left = los_links+'px'; newDiv.style.top = los_top+'px'; if(art_viereck=="voll"){ newDiv.style.backgroundColor = hell_farb; } else{ newDiv.style.border = "1px solid " + hell_farb; } kasten.appendChild(newDiv); } } function farb_vier_back(ele){ alert(ele); } function zeichne(position){ xwert = (position) ? position.pageX : window.event.offsetX; ywert = (position) ? position.pageY : window.event.offsetY; if(fach_gros_stat!="gros"){ lr = (xwert-10); //Linker Rand rr = (ywert-100);//Rechter Rand } else{ lr = xwert; //Linker Rand rr = ywert;//Rechter Rand } if(lr<breit_fach && rr<hoch_fach && lr>0 && rr>0 && stat=="yes"){ if(werk=="pinsel"){ var kasten = document.getElementById("fach"); var newDiv = document.createElement("div"); newDiv.style.position = "absolute"; newDiv.style.width = breit+'px'; newDiv.style.height = breit+'px'; newDiv.style.left = (lr-(breit/2))+'px'; newDiv.style.top = (rr-(breit/2))+'px'; newDiv.style.backgroundColor = hell_farb; kasten.appendChild(newDiv); } else if(werk=="spruh"){ for(var m = 0; m<breit; m++){ var zufall_links = Math.round(Math.random()*breit); var zufall_rechts = Math.round(Math.random()*breit); var kasten = document.getElementById("fach"); var newDiv = document.createElement("div"); newDiv.style.position = "absolute"; newDiv.style.width = "1px"; newDiv.style.height = "1px"; newDiv.style.left = (lr+zufall_links-(breit/2))+'px'; newDiv.style.top = (rr+zufall_rechts-(breit/2))+'px'; newDiv.style.backgroundColor = hell_farb; kasten.appendChild(newDiv); } } } if(stat=="gros_fach" && lr<705 && rr<305 && lr>0 && rr>0){ document.getElementById("fach").style.width = lr; document.getElementById("fach").style.height = rr; breite_fach = lr; hohe_fach = rr; document.getElementById("gros_fach").style.left = (xwert-5)+'px'; document.getElementById("gros_fach").style.top = (ywert-8)+'px'; } if(stat=="helligkeit" && (position.pageY-214)>=20 && (position.pageY-212)<=110){ document.getElementById("hell_bar").style.top = (position.pageY-213)+'px'; hell_berechnen((position.pageY-213-20)); } } function hell_berechnen(hohe){ if(hohe<12){ document.getElementById("hell").style.backgroundColor = hell_gros_oben[farb]; hell_farb = hell_gros_oben[farb]; document.getElementById("farbe").style.backgroundColor = hell_farb; } else if(hohe>=12 && hohe<36){ document.getElementById("hell").style.backgroundColor = hell_mittel_oben[farb]; hell_farb = hell_mittel_oben[farb]; document.getElementById("farbe").style.backgroundColor = hell_farb; } else if(hohe>=36 && hohe<48){ document.getElementById("hell").style.backgroundColor = hell_klein_oben[farb]; hell_farb = hell_klein_oben[farb]; document.getElementById("farbe").style.backgroundColor = hell_farb; } else if(hohe>=48 && hohe<60){ document.getElementById("hell").style.backgroundColor = farb; hell_farb = farb; document.getElementById("farbe").style.backgroundColor = hell_farb; } else if(hohe>=60 && hohe<72){ document.getElementById("hell").style.backgroundColor = hell_klein[farb]; hell_farb = hell_klein[farb]; document.getElementById("farbe").style.backgroundColor = hell_farb; } else if(hohe>=72 && hohe<84){ document.getElementById("hell").style.backgroundColor = hell_mittel[farb]; hell_farb = hell_mittel[farb]; document.getElementById("farbe").style.backgroundColor = hell_farb; } else if(hohe>=84 && hohe<=90){ document.getElementById("hell").style.backgroundColor = hell_gros[farb]; hell_farb = hell_gros[farb]; document.getElementById("farbe").style.backgroundColor = hell_farb; } } function werkzeug(zeug){ werk = zeug; document.getElementById(zeug).style.color = "#00AAFF"; for(var i = 0; i<3; i++){ if(werkzeugkasten[i]!=zeug){ document.getElementById(werkzeugkasten[i]).style.color = "#0000FF"; } } } function farbe(farbname){ if(farb!=farbname){ farb = farbname; hell_farb = farbname; document.getElementById("farbe").style.backgroundColor = farbname; document.getElementById("farbe").style.border = "1px solid #000000"; } else{ sichtbar("helligkeit", "visible"); document.getElementById("hell").style.backgroundColor = farb; } document.getElementById("farbe").style.backgroundColor = farbname; document.getElementById("farbe").style.border = "1px solid #000000"; } function sichtbar(ele, stat){ document.getElementById(ele).style.visibility = stat; } function hell(){ if(stat!="helligkeit"){ stat = "helligkeit"; } else{ stat = "no"; } } function hintergrund(hinter_farbe){ hinter = hinter_farbe; document.getElementById("fach").style.backgroundColor = hinter_farbe; sichtbar("hinter", "hidden"); } function voll(){ if(fach_gros_stat=="klein"){ fach_gros_stat = "gros"; breit_fach = 900; hoch_fach = 500; document.getElementById("fach").style.left = 0+'px'; document.getElementById("fach").style.top = 0+'px'; document.getElementById("fach").style.width = 900+'px'; document.getElementById("fach").style.height = 500+'px'; document.getElementById("fach").style.index = 3; document.getElementById("fach").style.backgroundColor = hinter; document.getElementById("normal_farben").style.visibility = "hidden"; document.getElementById("farbe_anzeig").style.visibility = "hidden"; document.getElementById("malflach").style.visibility = "hidden"; document.getElementById("gros_fach").style.visibility = "hidden"; document.getElementById("voll_modus").style.left = 5+'px'; document.getElementById("voll_modus").style.top = 5+'px'; } else{ fach_gros_stat = "klein"; breit_fach = 700; hoch_fach = 300; document.getElementById("fach").style.left = 10+'px'; document.getElementById("fach").style.top = 100+'px'; document.getElementById("fach").style.width = 700+'px'; document.getElementById("fach").style.height = 300+'px'; document.getElementById("fach").style.index = 0; document.getElementById("fach").style.backgroundColor = hinter; document.getElementById("normal_farben").style.visibility = "visible"; document.getElementById("farbe_anzeig").style.visibility = "visible"; document.getElementById("malflach").style.visibility = "visible"; document.getElementById("voll_modus").style.left = 500+'px'; document.getElementById("voll_modus").style.top = 92+'px'; document.getElementById("gros_fach").style.visibility = "visible"; } } //--> </script> <div style="position: relative;"> <div style="position:absolute; left:10px; top:10px; border:1px solid #0000FF; width:700px; height:80px"> <h1><a href="javascript:werkzeug('pinsel')" id="pinsel" style="color:#00AAFF" onmouseover="sichtbar('breite_pinsel', 'visible')">Pinsel</a> <a href="javascript:werkzeug('vier')" id="vier" onmouseover="sichtbar('art_vier', 'visible')">Viereck</a> <a href="javascript:werkzeug('spruh')" id="spruh" onmouseover="sichtbar('breite_spruh', 'visible')">Sprühen</a></h1> </div> <div style="position:absolute; left:350px; top:200px; background-color:#FFFFFF; visibility:hidden; border:1px solid #0000FF; z-index:99999999; width:188px; height:135px" id="helligkeit"> <div style="background-color:#0000FF"><font color="#FFFFFF">Helligkeit der Farbe</font> <a href="javascript:sichtbar('helligkeit', 'hidden')" id="red">X</a></div><br/> <div style="position:absolute; left:5px; top:25px; width:50px; height:100px; background-color:#000000; border:1px solid #0000FF" id="hell"></div> <div style="position:absolute; left:60px; top:22px"><img src="balk.png" width="20" height="107"/></div> <div style="position:absolute; left:60px; top:60px" id="hell_bar" onclick="hell()"><img src="drei.png" width="20px" height="20px"/></div> </div> <div style="position:absolute; left:15px; top:70px; background-color:#FFFFFF; visibility:hidden; border:1px solid #0000FF; z-index:99999999; width:188px; height:110px" id="breite_pinsel"> <div style="background-color:#0000FF"><font color="#FFFFFF">Breite</font> <a href="javascript:sichtbar('breite_pinsel', 'hidden')" id="red">X</a></div><br/> <div style="background-color:#000000; position:absolute; left:5px; top:55px; width:10px; height:10px" onclick="breite('10')"></div> <div style="background-color:#000000; position:absolute; left:20px; top:45px; width:25px; height:25px" onclick="breite('25')"></div> <div style="background-color:#000000; position:absolute; left:50px; top:35px; width:50px; height:50px" onclick="breite('50')"></div> <div style="background-color:#000000; position:absolute; left:105px; top:25px; width:75px; height:75px" onclick="breite('75')"></div> </div> <div style="position:absolute; left:133px; top:70px; background-color:#FFFFFF; visibility:hidden; border:1px solid #0000FF; z-index:99999999; width:165px; height:110px" id="art_vier"> <div style="background-color:#0000FF"><font color="#FFFFFF">Art</font> <a href="javascript:sichtbar('art_vier', 'hidden')" id="red">X</a></div><br/> <div style="position:absolute; left:5px; top:25px; width:74px; height:74px; border:1px solid #000000" onclick="art('leer')"></div> <div style="background-color:#000000; position:absolute; left:85px; top:25px; width:75px; height:75px" onclick="art('voll')"></div> </div> <div style="position:absolute; left:278px; top:70px; background-color:#FFFFFF; visibility:hidden; border:1px solid #0000FF; z-index:99999999; width:188px; height:110px" id="breite_spruh"> <div style="background-color:#0000FF"><font color="#FFFFFF">Breite</font> <a href="javascript:sichtbar('breite_spruh', 'hidden')" id="red">X</a></div><br/> <div style="background-color:#000000; position:absolute; left:5px; top:55px; width:10px; height:10px" onclick="breite('10')"></div> <div style="background-color:#000000; position:absolute; left:20px; top:45px; width:25px; height:25px" onclick="breite('25')"></div> <div style="background-color:#000000; position:absolute; left:50px; top:35px; width:50px; height:50px" onclick="breite('50')"></div> <div style="background-color:#000000; position:absolute; left:105px; top:25px; width:75px; height:75px" onclick="breite('75')"></div> </div> <div style="position:absolute; left:15px; top:1px; background-color:#FFFFFF"><font color="#0000FF">Werkzeug</font></div> <div style="position:absolute; left:10px; top:100px; border:1px solid #0000FF; width:700px; height:300px; overflow:hidden" id="fach"></div> <div style="position:absolute; left:705px; top:392px" id="gros_fach" onclick="ander()"><font color="#0000FF">+</font></div> <div style="position:absolute; left:15px; top:92px; background-color:#FFFFFF"><font color="#0000FF" onmouseover="sichtbar('breite', 'visible')" onmouseout="sichtbar('breite', 'hidden')" onclick="sichtbar('hinter', 'visible')" id="malflach">Malfläche</font></div> <div style="position:absolute; left:15px; top:110px; background-color:#FFFFFF; visibility:hidden; border:1px solid #0000FF" id="breite"><font color="#0000FF">700x300</font></div> <div style="position:absolute; left:100px; top:120px; border:1px solid #0000FF; visibility:hidden; width:200px; height:210px; z-index:99999999; background-color:#FFFFFF" id="hinter"> <div style="background-color:#0000FF"><font color="#FFFFFF">Hintergrundfarbe</font> <a href="javascript:sichtbar('hinter', 'hidden')" id="red">X</a></div> <div style="position:absolute; left:10px; top:25px; width:40px; height:40px; background-color:#000000; border:1px solid #000000" onclick="hintergrund('#000000')"></div> <div style="position:absolute; left:55px; top:25px; width:40px; height:40px; background-color:#555555; border:1px solid #000000" onclick="hintergrund('#555555')"></div> <div style="position:absolute; left:10px; top:70px; width:40px; height:40px; background-color:#AAAAAA; border:1px solid #000000" onclick="hinter('#AAAAAA')"></div> <div style="position:absolute; left:55px; top:70px; width:40px; height:40px; background-color:#FFFFFF; border:1px solid #000000" onclick="hintergrund('#FFFFFF')"></div> <div style="position:absolute; left:10px; top:115px; width:40px; height:40px; background-color:#990000; border:1px solid #000000" onclick="hintergrund('#990000')"></div> <div style="position:absolute; left:55px; top:115px; width:40px; height:40px; background-color:#FF0000; border:1px solid #000000" onclick="hintergrund('#FF0000')"></div> <div style="position:absolute; left:10px; top:160px; width:40px; height:40px; background-color:#999900; border:1px solid #000000" onclick="hintergrund('#999900')"></div> <div style="position:absolute; left:55px; top:160px; width:40px; height:40px; background-color:#FFFF00; border:1px solid #000000" onclick="hintergrund('#FFFF00')"></div> <div style="position:absolute; left:100px; top:160px; width:40px; height:40px; background-color:#00FF00; border:1px solid #000000" onclick="hintergrund('#00FF00')"></div> <div style="position:absolute; left:145px; top:115px; width:40px; height:40px; background-color:#00AA00; border:1px solid #000000" onclick="hintergrund('#00AA00')"></div> <div style="position:absolute; left:145px; top:70px; width:40px; height:40px; background-color:#00FFFF; border:1px solid #000000" onclick="hintergrund('#00FFFF')"></div> <div style="position:absolute; left:100px; top:115px; width:40px; height:40px; background-color:#0000FF; border:1px solid #000000" onclick="hintergrund('#0000FF')"></div> <div style="position:absolute; left:100px; top:25px; width:40px; height:40px; background-color:#000055; border:1px solid #000000" onclick="hintergrund('#000055')"></div> <div style="position:absolute; left:145px; top:25px; width:40px; height:40px; background-color:#FF00FF; border:1px solid #000000" onclick="hintergrund('#FF00FF')"></div> <div style="position:absolute; left:100px; top:70px; width:40px; height:40px; background-color:#800080; border:1px solid #000000" onclick="hintergrund('#800080')"></div> </div> <div style="position:absolute; left:715px; top:10px; border:1px solid #0000FF; width:100px; height:390px" id="normal_farben"> <div style="position:absolute; left:10px; top:10px; width:40px; height:40px; background-color:#000000; border:1px solid #000000" onclick="farbe('#000000')"></div> <div style="position:absolute; left:55px; top:10px; width:40px; height:40px; background-color:#555555; border:1px solid #000000" onclick="farbe('#555555')"></div> <div style="position:absolute; left:10px; top:55px; width:40px; height:40px; background-color:#AAAAAA; border:1px solid #000000" onclick="farbe('#AAAAAA')"></div> <div style="position:absolute; left:55px; top:55px; width:40px; height:40px; background-color:#FFFFFF; border:1px solid #000000" onclick="farbe('#FFFFFF')"></div> <div style="position:absolute; left:10px; top:100px; width:40px; height:40px; background-color:#990000; border:1px solid #000000" onclick="farbe('#990000')"></div> <div style="position:absolute; left:55px; top:100px; width:40px; height:40px; background-color:#FF0000; border:1px solid #000000" onclick="farbe('#FF0000')"></div> <div style="position:absolute; left:10px; top:145px; width:40px; height:40px; background-color:#999900; border:1px solid #000000" onclick="farbe('#999900')"></div> <div style="position:absolute; left:55px; top:145px; width:40px; height:40px; background-color:#FFFF00; border:1px solid #000000" onclick="farbe('#FFFF00')"></div> <div style="position:absolute; left:10px; top:190px; width:40px; height:40px; background-color:#00FF00; border:1px solid #000000" onclick="farbe('#00FF00')"></div> <div style="position:absolute; left:55px; top:190px; width:40px; height:40px; background-color:#00AA00; border:1px solid #000000" onclick="farbe('#00AA00')"></div> <div style="position:absolute; left:10px; top:235px; width:40px; height:40px; background-color:#00FFFF; border:1px solid #000000" onclick="farbe('#00FFFF')"></div> <div style="position:absolute; left:55px; top:235px; width:40px; height:40px; background-color:#0000FF; border:1px solid #000000" onclick="farbe('#0000FF')"></div> <div style="position:absolute; left:10px; top:280px; width:40px; height:40px; background-color:#000055; border:1px solid #000000" onclick="farbe('#000055')"></div> <div style="position:absolute; left:55px; top:280px; width:40px; height:40px; background-color:#FF00FF; border:1px solid #000000" onclick="farbe('#FF00FF')"></div> <div style="position:absolute; left:10px; top:325px; width:40px; height:40px; background-color:#800080; border:1px solid #000000" onclick="farbe('#800080')"></div> </div> <div style="position:absolute; left:720px; top:1px; background-color:#FFFFFF"><font color="#0000FF" onmouseover="sichtbar('meine_farbe', 'visible')" onmouseout="sichtbar('meine_farbe', 'hidden')" id="farbe_anzeig">Farbe</font></div> <div style="position:absolute; left:720px; top:30px; border:1px solid #0000FF; background-color:#FFFFFF; visibility:hidden; z-index:99999999; height:85px; border:1px solid #0000FF" id="meine_farbe"><b>Aktuelle Farbe:</b><br/><div style="position:absolute; left:17px; top:40px; width:40px; background-color:#000000; height:40px" id="farbe"></div></div> </div> <div style="height: 500px;"> </div> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/fun/malen-2/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">document.onmousemove = zeichne;</script> <!-- präsentiert von kostenlose-javascripts.de -->