Die Einbindung des Skripts an sich erfolgt ganz normal über einen Aufruf, der beispielsweise im HEAD-Teil einer HTML-Seite untergebracht werden kann.
<script type="text/javascript" src="imagecrop3.0.js"></script>
Dieses Skript hängt von einigen HTML-Elementen ab, die hier zusammen arbeiten. Wie angesprochen benötigt man Eingabefelder, in denen die Informationen für den Punkt der linken oberen Ecke der Auswahl sowie deren Höhe und Breite untergebracht werden. Dies können auch unsichtbare Eingabefelder sein:
<input type="hidden" id="ic_top"/>
<input type="hidden" id="ic_left"/>
<input type="hidden" id="ic_height"/>
<input type="hidden" id="ic_width"/>
Weiterhin benötigt werden ein DIV-Container, der den Zuschneidebereich markiert (unten mit einem Karomuster hinterlegt) und darin der Bereich, der das zuzuschneidende Bild als Hintergrundbild beinhaltet und dessen Größe besitzt.
Ein Beispielstyling des HTML-Teils kann übrigens im ImageCrop-Stylesheet betrachtet werden, welches sich auch auf das animierte Hintergrundbild bezieht, welches die Auswahllinien so aussehen lässt wie in den meisten Bildbearbeitungsprogrammen.
<div id="actionarea" class="crosshair">
<div id="crop" style="background-image:url(bild.jpg);height:123px;width:456px">
</div>
</div>
Abschließend muss das Skript initialisiert werden. Dies erfolgt durch Instanziierung der lx_crop-Klasse mit den entsprechenden IDs der Eingabefelder und DIVs als Parameter. Die ersten zwei Parameter bezeichnen dabei die Container des Gesamtauswahlbereiches und des Aktionsrahmens. Der letzte Satz Parameter enthält die Formularfelder, in die die Maße der Auswahl eingetragen werden. Letztendlich muss das Zuschneide-Skript noch aktiviert werden.
<script type="text/javascript">
crap = new lx_crop('crop','actionarea',
'ic_left','ic_top','ic_width','ic_height');
crap.setActive(true);
Durch die Initialisierung eines Zuschneideobjektes und dessen explizite Aktivierung mittels setActive() ist es möglich, mehrere Auswahlen auf der gleichen Seite zu betreiben. Dabei sollte nur darauf geachtet werden, dass jeweils nur ein Bereich aktiv ist.
Schließlich können auch noch Hilfetexte für die einzelnen Elemente festgelegt werden. Diese Texte erscheinen in einem kleinen Tooltip, wenn der Mauszeiger in bestimmte Bereiche bewegt wird.
crap.setI18Ntitle('Wand','klicken und ziehen zum verschieben');
crap.setI18Ntitle('Act','klicken und ziehen um Auswahl zu markieren');
crap.setI18Ntitle('resizers','klicken und ziehen um Größe der Auswahl zu ändern');
</script>
oben | links |
Seitenverhältnis |
Höhe | Breite |
Es gibt einige Tastaturfunktionen: