Javascript - Bildgröße ändern.

[Geldmann3]

Kennt einer von euch ein Javascript mit dem man die Größe eines Bildes beliebig ändern kann so wie man unter Windows die Größe der Fenster durch halten und ziehen bzw. schieben ändern kann.

Also ein Script zum benutzerdefiniertem scalieren der Bildgröße mit der Maus. Mir war es so, als ob ich ein solches Script mal wo gesehen hätte, doch mir fällt nicht mehr ein wo. Es sollte im Firefox und im IE funktionieren

Danke im vorraus.

[Gast]

das lässt sich recht einfach selber basteln.

[dav133]

document.getElementById("imageid").width und document.getElementById("imageid").height sind erstmal die Attribute, die du brauchst. Und das soll jetzt noch vom Benutzer per Maus größer / kleiner gezogen werden können?! Ist das Seitenverhältnis des Bildes zu berücksichtigen?

lg

[Geldmann3]

Das Seitenverhältnis ist egal. Es sollte sich nur frei bewegen und verschieben lassen. Am besten wäre es, wenn dieses Script gleich alle auf der Seite integrierten Bilder so verändern kann.

[Geldmann3]

Ich habe nun folgenden JS Code im Web gefunden.
javascript:document.body.contentEditable='true';document.designMode='on';void 0
Wenn ich diesen Code in die Browserleiste eingebe und "abdrücke" kann ich die gesamte Seite editieren.
Doch ich möchte diese Funktion ja nur für die Bilder haben. Ausserdem sollen sich die Bilder nicht entfernen lassen, sondern eben nur verschieben und verändern.

[dav133]

Ich habe nun folgenden JS Code im Web gefunden.
javascript:document.body.contentEditable='true';document.designMode='on';void 0
Wenn ich diesen Code in die Browserleiste eingebe und "abdrücke" kann ich die gesamte Seite editieren.
Doch ich möchte diese Funktion ja nur für die Bilder haben. Ausserdem sollen sich die Bilder nicht entfernen lassen, sondern eben nur verschieben und verändern.

Dein Fund im Web wird dir nicht viel helfen ;). Das ganze soll dann ja schließlich auch speicherbar sein nehme ich an. Da gibts viele gute jQuery-Plugins für son Spaß, schau dir mal das (http://www.oneblackbear.com/resizer/index.html) an und google mal nach "jCrop", vllt. suchste ja sowas.

lg

[Geldmann3]

Das ganze soll dann ja schließlich auch speicherbar sein nehme ich an.
Nein muss es nicht.

[DanMan]

Du erstellst ein neues Element (mit JS) und legst es auf das Bild z.B. unten rechts Dem gibst du einen onclick-Listener, von dem du die mom. Position (Event.x, Event.y) speicherst Außerdem einen onmousemove-Listener, von dem du auch die Position speicherst Dann berechnest du daraus die Größenänderung (Differenz) für das Bild je Achse Und weißt sie dem/den Bild/-ern zu
Mit einer JS-Library deines Vertrauens sollte das nicht zu komplex (Mausbewegung) werden.

[dav133]

@DanMan:

Die Arbeit würde ich mir nicht selbst machen, es gibt doch soviel "fertiges", getestetes im Internet - gerade in Verbindung mit den ganzen JS-Libraries als Plugin.

Das hier ist zwar eher ein relikt aus alten HTML4.0-Zeiten, aber sollte funktionstechnisch glücklich machen: http://www.jsmadeeasy.com/javascripts/DHMTL%20Miscelanious/drag_resize/drag_resize.htm

lg

[DanMan]

@DanMan:

Die Arbeit würde ich mir nicht selbst machen, es gibt doch soviel "fertiges", getestetes im Internet - gerade in Verbindung mit den ganzen JS-Libraries als Plugin.

Das hier ist zwar eher ein relikt aus alten HTML4.0-Zeiten, aber sollte funktionstechnisch glücklich machen: http://www.jsmadeeasy.com/javascripts/DHMTL%20Miscelanious/drag_resize/drag_resize.htm
Umso besser. Geldmann3 hat sich halt nicht geäußert, ob er was fertig hat oder nicht.

[Geldmann3]

Im Moment habe ich noch nichts fertig. Doch das Script im Link funktioniert ganz gut:eek:
Es scheint ja einiges an Arbeit zu sein, solch ein Script selbst zu erstellen. Ganz davon abgesehen sind meine JS Kenntnisse nur minimal.
Wenn jemand noch ähnliche Scripts die frei zur Verfügung stehen kennt-> Ich freue mich über jeden Link:smile:

Natürlich könnte ich auch Google benutzen, doch die Auswahl ist riesig und nur ein sehr kleiner Bruchteil der Ergebnisse ist brauchbar. Manchmal übertrifft die menschliche Intelligenz eben Suchmaschinen.