Bild per Eingabe verändern

Bei diesem Javascript könnt ihr die Größe und die Position eines von euch selbst festgelegten Bildes ändern.

Dabei könnt ihr die Breite und Hohe sowie den Abstand von links und oben festlegen. Dabei wird die Ausgabe sofort geändert, wenn ihr etwas eingebt.

Verändern sie die Größe

Höhe:                      Breite:               

Verändern sie die Ausrichtung

Abstand Oben:       Abstand Links:   

Verändern sie das Bild

URL:                 

<!-- präsentiert von kostenlose-javascripts.de --> <strong> Verändern sie die Größe </strong> <br /><br /> Höhe:                <input type="text" id="hoehe" value="313" onkeyup="fAendern()" />      Breite:               <input type="text" id="breite" value="313" onkeyup="fAendern()" /><br /><br /> <strong> Verändern sie die Ausrichtung </strong> <br /><br /> Abstand Oben:  <input type="text" id="abstand_oben" value="200" onkeyup="fAendern()" />     Abstand Links:   <input type="text" id="abstand_links" value="650" onkeyup="fAendern()" /><br /><br /> <strong> Verändern sie das Bild </strong> <br /><br /> URL:                 <input type="text" id="URL" value="https://www.kostenlose-javascripts.de/images/homer.jpg" onkeyup="fAendern()" /><br /><br /> <div id="imgdiv"></div> <script type='text/javascript'> <!-- var hoehe = 313; //Grundeinstellungen var breite = 313; var top = 200; var left = 650; var url = "https://www.kostenlose-javascripts.de/images/homer.jpg"; function fAendern(){ if(document.getElementById('hoehe').value != ""){ hoehe = document.getElementById('hoehe').value; } if(document.getElementById('breite').value != ""){ breite = document.getElementById('breite').value; } if(document.getElementById('abstand_oben').value != ""){ top = document.getElementById('abstand_oben').value; } if(document.getElementById('abstand_links').value != ""){ left = document.getElementById('abstand_links').value; } if(document.getElementById('URL').value != ""){ url = document.getElementById('URL').value; } document.getElementById('imgdiv').innerHTML = '<div style="position:absolute; top:' + top + 'px; left:' + left + 'px;" id="div"><img src="' + url + '" id="bild" height="' + hoehe + '" width="' + breite + '" /></div>' } //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/bilder/bild-per-eingabe-veraendern/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">fAendern();</script> <!-- präsentiert von kostenlose-javascripts.de -->