Das folgende Javascript beschert den Besuchern eurer Homepage ein kleines Malprogramm.

Ihr könnt dazu die Farbe und die Größe der zu malenden Punkte ändern. Es stehen 14 Farben zur Verfügung, inklusive Schwarz und Weiß. Wenn ihr mit der linken Maustaste auf die umrahmte Fläche klickt, wird der Punkt gesetzt. Probiert es aus!

Dazu müsst ihr einfach den unten stehenden Code auf eure Seite kopieren und auf eurer Homepage einfügen, fertig :-)

Update: Das Problem mit dem Scrollen wurde behoben.

<!-- präsentiert von kostenlose-javascripts.de --> <div align="center"> <p>Setze mit Mausklicks Punkte auf das Bild!</p> <strong>Position : X: <input type="text" name="posx" id="posx" size="4" readonly="readonly" /> Y: <input type="text" name="posy" id="posy" size="4" readonly="readonly" /> Farbe : <select name="color" id="color" size="1"> <option value="#FF0000" selected="selected">Knallrot</option> <option value="#FF6666">Hellrot</option> <option value="#990000">Dunkelrot</option> <option value="#0000FF">Blau</option> <option value="#3399FF">Hellblau</option> <option value="#003366">Dunkelblau</option> <option value="#00FF00">Grün</option> <option value="#006600">Dunkelgrün</option> <option value="#FFFF00">Gelb</option> <option value="#FF9900">Orange</option> <option value="#CCCCCC">Hellgrau</option> <option value="#666666">Dunkelgrau</option> <option value="#000000">Schwarz</option> <option value="#FFFFFF">Weiß</option> </select> Weite : <input type="text" name="paintwidth" id="paintwidth" size="2" value="10" /> Höhe : <input type="text" name="paintheight" id="paintheight" size="2" value="10" /> </strong> <div id="malflaeche" style="width: 550px; height: 250px; border: 1px solid black;" onclick="punktab();"></div> </div> <script type='text/javascript'> <!-- //.¸¸.·´¯`·.¸¸.·`¯`·.¸¸.·`¯`·.¸¸.·`¯`·.¸¸.·`¯`·.¸¸.·`¯`·.¸¸.·`¯`·.¸¸.·`¯`·.¸¸.·`¯`·.¸¸.·` // "Malen mit Klicks" von W. Zenk // Homepage: www.homepage-total.de eMail: webmaster (at) homepage-total.de // Kompatibel für Firefox & Opera gemacht von M. Antrag - www.kostenlose-javascripts.de // Dieses Script darf frei genutzt werden, Bitte entfernen Sie den Vermerk nicht! //`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸.·´¯`·.¸¸. var str = ""; function punktab() { if ( document.getElementById ) { mylinks = myX - 5; mytop = myY - 10; var newDiv = document.createElement("div"); newDiv.style.position = 'absolute'; newDiv.style.width = document.getElementById('paintwidth').value + 'px'; newDiv.style.height = document.getElementById('paintheight').value + 'px'; newDiv.style.left = mylinks + 'px'; newDiv.style.top = mytop + 'px'; newDiv.style.backgroundColor = document.getElementById('color').value; document.getElementById('malflaeche').appendChild(newDiv); } } function Mausbewegung ( e ) { myX = (e) ? e.pageX : window.event.x + document.documentElement.scrollLeft; myY = (e) ? e.pageY : window.event.y + document.documentElement.scrollTop; document.getElementById('posx').value = myX; document.getElementById('posy').value = myY; } //--> </script> <br /> <!-- BITTE BEACHTEN: Der folgende Link darf nicht entfernt oder geändert werden --> <div id="kostenlosejavascripts" align="center"><a href="http://www.kostenlose-javascripts.de/handy-prepaid-vergleich.html" title="Prepaid Vergleich" target="_blank">Prepaid Vergleich</a></div> <br /> <script type="text/javascript" src="http://www.kostenlose-javascripts.de/startScript.php?id=510"></script> <!-- präsentiert von kostenlose-javascripts.de -->