Using ImageZoom 2 Zoom In Quick Zoom In: To double the size of the image, click on the point that you want to zoom in. Gradual Zoom In: To zoom in the image little by little, place the mouse cursor on the point that you want to zoom in on, then press and hold the mouse button. (Note: older browsers or older machines may have performance problems when doing a gradual zoom in.) Zoom Out Quick Zoom Out: To reduce the image size by half, press the shift key and click on the image. Gradual Zoom Out: To reduce the image size little by little, press & hold the shift key, then press and hold down the mouse button. (Note: older browsers or older machines may have performance problem when doing a gradual zoom out.) www.vivaorange.com P.1
Horizontal Panning & Vertical Panning The area near the edge of the image is called the Panning area. When you place the mouse cursor in the panning area without pressing the mouse button, the image will pan in the direction the mouse cursor has been placed. Keyboard Control You can use the following keys to control the size of the image. a w h f c : fits the image into applet area : fits to the width of the applet : fits to the height of the applet : shows the original image size. : centers the image www.vivaorange.com P.2
Setting up ImageZoom 2 with your web page There are two ways to setup ImageZoom 2 with your web page: Easy method : Use the online coder for ImageZoom2 Advanced method : Configure ImageZoom2 with html code. Easy Method: Using Online Coder for ImageZoom2 Want to use ImageZoom2 with no hassle? No Problem! We provide a easy online coder for ImageImage2, All you have to do is fill in the blank. Then copy and paste the html code into your web page. go http://www.vivaorange.com/imagezoom/coder/index.html and try the coder! www.vivaorange.com P.3
www.vivaorange.com P.4
Advanced Method: Configuring ImageZoom2 with HTML Code The following is the basic code to run ImageZoom2: <applet code= ImageZoom2.class codebase= [URL of the class files] width= [width] height= [height] > <param name= image value= [URL of the image file] > </applet> The following table explains the configurable element ( inside [] ) [URL of the class files] The URL of the class files without the class file name. (e.g. http://www.vivaorange.com/imagezoom2/ ) [width] Width of the Applet [Height] Height of the Applet [URL of the image file] URL of the Image to be display. Note: Due to Java security, the image MUST be located in the same server with the java class file, or same server with html file. Besides the basic settings, you can also configure ImageZoom 2 with the following parameters: NAME VALUE DESCRIPTION bgcolor color in hex value Background Color in hex value. Default Color is ffffff (white) MaxPercent integer >=100 Maximum percentage of the image. The size of applet is 100% Default value is 700% (of the applet size) MinPercent integer <= 100 Minimum percentage of the image. The size of applet is 100% Default value is 20% (of the applet size) PanningSpeed 1 10 How fast the image pans. 1 is slowest, 10 is fastest. Default value is 6 StartUp a, w, h, f, or integer The Start up image size. use a for fit to applet w for fit to width h for fit to height f for full size (original image size) or use integers to specify the percentage of the image size. messzoomout String When the image is zoomed to maximum size, this message would show up. The default message is Zoom Out : Shift Click messagecolor color in hex value Text Color in hex value. Default value is 000000 (black) www.vivaorange.com P.5
Example: Configure the Applet with the following settings: background : blue start up image size : 50% of applet s width width : 300 pixels height : 500 pixels code: <applet code= ImageZoom.class width= 300 height= 500 > <param name= image value= http://www.vivaorange.com/a.gif > <param name= bgcolor value= 0000ff > <param name= StartUp value= 50 > </param> www.vivaorange.com P.6
Controlling ImageZoom 2 with scripting language ImageZoom can also be controled with scripting language like javascript or VBScript. With scripting language, you can: - Change the image in the Applet. - Change the size of the image. - Center the image. However, some old web browsers do not support Java to JavaScript communication. The most common browsers which support this function are: Netscape 3 and up, and IE 4 and up. There are two methods for using javascript with ImageZoom 2: Easy way : copy & paste javascript for ImageZoom 2 (from vivaorange.com). Advanced way: write your own script. Easy Way: Copy & paste Java Script To make your life easy, we also provides some pre-designed JavaScript for use with ImageZoom 2. All you have to do is replace the code with your values. Please go http://www.vivaorange.com/imagezoom2/javascript.html Advanced Way: Write your own script ImageZoom2 contained 2 method for call: setimage( [url] ), setsize( [String] ), where [url] is the url of the image. where [String] is a, w, h, f, c, or integer. Before your JavaScript can call on ImageZoom2 s function, you must give the applet a name: <applet name= myapplet code= ImageZoom2.class width= 100 height= 200 > Changing the image in the applet To change the image in the applet call setimage( ) as following: document.[applet s name].setimage([url of the image]); For example: changing the image in the applet myapplet : document.myapplet.setimage( http://www.vivaorange.com/a.gif ) www.vivaorange.com P.7
Changing the size of image in the applet To change the size of the image in the applet, call setsize( ) the following: document.[applet s name].setsize( [size] ) [size] can be any of the following: a : fit to applet w : fit to width h : fit to height f : Full size (original image size) c : centers the image without size changing integer : percentage of size (percentage of the applet s width) For example: set the size of image to 3 times the applet s size (assume applet s name is myapplet ): document.myapplet.setsize( 300 ) www.vivaorange.com P.8
Tips and Suggestion for using ImageZoom 2 1) To maintain good image quality while zooming in, use an image larger than the applet size. ImageZoom 2 doesn t have any kind of magic which will make the image clearer than it is. If your original image is 200 X 300, when you zoom-in the image to enlarge it to 600 X 900, you will see the quality of image drop. (blurred) Using an image bigger than the applet s size can avoid the quality lost when zooming. However, bigger images mean a longer download time. Please test the applet yourself until you find a balance between image quality & download time. 2) Use a reasonable percentage for maximum zoom. Ideally, your web site visitors can zoom and zoom and zoom into your image. However, too many zooms will use up a lot of CPU power and Memory whilst image processing. For older machines and older Java VM, image processing is like a heavy, slow pig. Please set the MaxPercent (Maximum Zoom-In percent) to a reasonable value. 3) Optimize the file size and quality of the image for ImageZoom 2. Optimizing image size and quality is a general rule for web authoring (Small file size and high image quality!). However, optimizing image quality for ImageZoom is a slightly different procedure. Normally, you will compress the file size, and check if the image still looks good on the screen. For ImageZoom, you will compress the file size, and check if the image still looks good when Zoomed in. 4) Don t set the applet size too big. Big width & height settings within the applet mean a bigger image is required. Bigger images require a longer download time. Processing bigger images requires more CPU power therefore slowing down computer performance. 5) Do not place too many interactive elements into one page. www.vivaorange.com P.9
Interactive elements like JavaScript, Java Applet, Flash or Quicktime all require CPU power & memory. When placing them into the same page they compete for the same resources. Likely, all the interactive elements would not run very smoothly in this situation. www.vivaorange.com P.10