XIO ® applets

XIOview V1.5 Image Zoom Applet - TRIAL VERSION - Example Implementations

Please consider to  license XIOview ». For more information about this applet visit  www.XIO.biz ».

GENERAL »
PARAMETERS »
DEMO 1 »
CODE 1 »
DEMO 2 »
CODE 2 »
DEMO 3 »
CODE 3 »
DEMO 4 »
CODE 4 »
DEMO 5 »
CODE 5 »

Code for Demonstration 3

Filtering and basic JavaScript-control.

This page contains the source code for the applet configuration and two HTML-excerpts from the JavaScript-controls used in demonstration 3.


Applet code:

<applet code="biz.xio.XIOview" archive="CODE/XIOview.jar" codebase="../" name="applet1" width="240px" height="200px" alt="XIOview 1.5 Java Applet (requires a Java-enabled browser)">

<param name="cabbase"               value="CODE/XIOview.cab">
<param name="license_key"           value="ENTER YOUR LICENSE KEY HERE">
<param name="image"                 value="images/tomato.jpg">

<param name="zoom"                  value="50%">
<param name="zoom_range"            value="50%-200%">
<param name="zoom_area_width"       value="125px">
<param name="zoom_area_height"      value="125px">
<param name="zoom_permanent"        value="true">

<param name="image_grayscale"       value="true">

<param name="background_color"      value="0,0,0">

<!-- Text below is shown if Java is not currently supported or activated. -->

<p>
The interactive content of this page requires a Java-enabled browser.<br>
Please check your browser's settings and activate Java.<br>
If your browser has no built in Java plug-in you can obtain one at <a href="http://www.java.com">www.java.com</a>.
</p>

</applet>

Additionally used applet-parameters:

- "image_grayscale": Sets grayscale-mode for the displayed image.

- "background_color": Sets the background-color of the applet (visible during loading and if aspect-ratio related margins occur). In this case the background-color is set to black (in RGB-mode: "0,0,0").




JavaScript-control code excerpts:

<!-- more html code -->

<p class="txt" style="text-align:center">
  <b>-</b>

    <a class="control" href="JavaScript:document.applet1.setCfg('zoom=50%')">X</a>
    <a class="control" href="JavaScript:document.applet1.setCfg('zoom=75%')">X</a>
    <a class="control" href="JavaScript:document.applet1.setCfg('zoom=100%')">100%</a>
    <a class="control" href="JavaScript:document.applet1.setCfg('zoom=125%')">X</a>
    <a class="control" href="JavaScript:document.applet1.setCfg('zoom=150%')">X</a>
    <a class="control" href="JavaScript:document.applet1.setCfg('zoom=175%')">X</a>
    <a class="control" href="JavaScript:document.applet1.setCfg('zoom=200%')">X</a>

  <b>+</b>
</p>

<!-- more html code -->

As you can see here, changing parameters is easy: Simply call the "setConfiguration(...)" or - shorthand - "setCfg(...)"-method of XIOview via JavaScript and assign values to the parameters of interest (here: zoom).

This gives you total freedom to decide which options you want to implement and which design to use for them:
For this example simple text-links are used. The attribute class="control" inside the link-tags refers to a predefined CSS (stylesheet) definition used for link-formatting of control-"buttons" in this project.

<!-- more html code -->

<p class="txt" style="text-align:center">
  <b>-</b>

    <a class="control" href="JavaScript:document.applet1.setCfg('image_brightness=50% + zoom_brightness=50%')">X</a>

    <a class="control" href="JavaScript:document.applet1.setCfg('image_brightness=75% + zoom_brightness=75%')">X</a>

    <a class="control" href="JavaScript:document.applet1.setCfg('image_brightness=100% + zoom_brightness=100%')">100%</a>

    <a class="control" href="JavaScript:document.applet1.setCfg('image_brightness=125% + zoom_brightness=125%')">X</a>

    <a class="control" href="JavaScript:document.applet1.setCfg('image_brightness=150% + zoom_brightness=150%')">X</a>

    <a class="control" href="JavaScript:document.applet1.setCfg('image_brightness=175% + zoom_brightness=175%')">X</a>

    <a class="control" href="JavaScript:document.applet1.setCfg('image_brightness=200% + zoom_brightness=200%')">X</a>

  <b>+</b>
</p>

<!-- more html code -->

As illustrated by the second code excerpt, you can change multiple options at the same time by placing a "+" between each parameter assignment. So, in this case, the brightness-settings are modified equally for the zoomed-area and the scaled image at the same time.


Copyright © 2004-2005 by Martin Rieger, XIO® Software. XIO® is a registered trademark of Martin Rieger.
Java™ is a registered trademark of Sun Microsystems, Inc.. All other trademarks are properties of their respective owners.