Bild/Grafik anhand Benutzereingabe laden

S

Salomo

0
hey Leute,

kenne mich zwar etwas mit html und css es aber habe Probleme mit grafiken und Bildern. folgendes Szenario:

ich möchte die größe (width, height) eintippen und dann wenn ich auf den button klicke erscheint das bild in der größe die ich angegeben habe.

<script type="...>
var bild = new Image();
bild.src = http://2.bp.blogspot.com/_YGs7eU5ZG-U/TNiHYKTRG6I/AAAAAAAAABQ/QsxazlERHYQ/s400/zonk.gif;

function draw(width, height){

document.getElementById('drawbox'). wie geht's weiter?

}
<Body>
<Input type="number" value="0" Name="width" id="idwidth">
<Input type="number" value="0" Name="height" id="idheight">
<Input type="button" value="zeichnen" onclick="draw(idwith.value, idheight.value)";

<div id="drawbox">
</div>
 
HTML: 
document.getElementById("adiv").style.height="100px"
zum Beispiel.
 
Um hier noch eine eingermassen sinnvolle Antwort zu geben:

HTML: 
<!DOCTYPE html>
<html>
<body>

<form id="resize-form">
    <input type="text" name="width" id="resize-form-width" />
    <input type="text" name="height" id="resize-form-height" />

    <input type="submit" value="Zeichnen" />
</form>

<div id="drawbox"></div>

<script type="text/javascript">
// don't pollute global scope
(function() {

    var form   = document.getElementById('resize-form'),
        width  = document.getElementById('resize-form-width'),
        height = document.getElementById('resize-form-height'),
        box    = document.getElementById('drawbox');

    form.onsubmit = function(event) {
        var img    = new Image();
        img.src    = 'http://2.bp.blogspot.com/_YGs7eU5ZG-U/TNiHYKTRG6I/AAAAAAAAABQ/QsxazlERHYQ/s400/zonk.gif';
        img.width  = width.value;
        img.height = height.value;

        box.appendChild(img);

        return false;
    }
})();
</script>
</body>
</html>

Die Linie die dich am meisten interessieren dürfte:

Code: 
box.appendChild(img);

Nichts schönes, aber funktioniert zumindest in einem Chrome. :)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben