JavaObjects.net User Documentation Animated Image Menu Note : Graphics only available on on-line or Word document formats http://www.javaobjects.net (c) Fugazi Consulting Ltd 2003 Overview Display your photos, images of your products or family snaps on the internet in an interactive, animated, and space efficient java applet ! • Display any number of images • Any size applet, any size images (JPEG or GIF) • Auto thumbnail functionality ... just supply the original image • Animate the selected image into full view (can be turned off) • Customizable loading message, font, colors etc. • Include browser status bar descriptions for each image HTML Example Installation and Configuration Download the class file. Use the "Buy Now" button found on the website. Copy the above code (in bold) into your HTML (note, not the content) of your web page, then copy the class file into the same directory. Copy your image files into the same directory, or into a subdirectory. You can customise your applet by changing the following parameters (some or all of which are optional, i.e. can be omitted) : width height Adjust to suit the size of applet you wish to appear on your page. This will be the size your images will appear as when the user clicks on a thumbnail. See note below. num_x The number of images to be displayed on the X axis (across). Defaults to 3. num_y The number of images to be displayed on the Y axis (down). Defaults to 3. animate "on" or "off", should the image animate into supersize when the user clicks, or should the image just "appear" large. speed The speed of the animation when the user clicks on a thumbnail. The higher the value, the faster the animation. Defaults to 10 if omitted. backcolor The background color to the applet. This is the color of the area the user will see whilst the images are loading. Defaults to white if omitted. forecolor The color of the "loading" text that the user will see whilst each image is being downloaded into the applet. Defaults to black if omitted. fontstyle The fontstyle of the "loading" text. Helvetica, TimesRoman or Courier. Defaults to Helvetica if parameter is omitted fonttype The fonttype of the "loading" text. Plain, Bold, Italic. Defaults to Plain if parameter is omitted fontsize The size of the "loading" text. Defaults to 11 if omitted text The text displayed on each thumbnail whilst the browser is downloading your images. Defaults to "loading..." image_n The name of the JPEG or GIF file, where n is an incrementing sequential number starting at 1. Image 1 will appear in the top left hand corner, the last image will appear in the bottom right hand corner. You can use subdirectories to store your images by specifying "subdirectoryname/filename.jpg" tooltip_n A message that will appear in the browsers status bar when the user hovers over each image, one message per image. Optional. This applet is best used with a consistent number of images, for example a grid of 3x3 images, or 4x4, 5x3 and so on (this, of course, would equate to 9, 16 or 15 images). However it is not totally necessary to have 9, 16 or 15 images. For example, if you have a grid of 4x3 images (space for 12) but you only supply the applet 10 images, the last two "spaces" will not load any image, but instead will simply be set to the background color. Image Sizes and Number of Images Note : Whilst this applet will work quite happily with any number of images (e.g. 3x3, 4x4, 5x3), we suggest you restrict the number of images to a sensible number to keep the download speed to a sensible time. Note : Whilst this applet will work with any size of image, we suggest you restrict the size to a sensible level. Remember that some users still have their monitor resolutions set at 640x480 and 800x600, and your page should be designed with this in mind. Note : Another consideration with extra large images is one of the animation. The animation routine may flicker if you have particularly large (both in terms of number of K bytes and/or width x height) image, and you may wish to reduce the speed of the animation, or turn animation off completely. Note : As with any web development which involves display images on a web site, it is imperative that you keep the size of the images to an absolute minimum. Very large images can take a very long time to down, particularly if your user is using a 56k dial up modem. Use JPEG compression to reduce the number of K each image takes up. Try to keep as small as possible. Note : Another way of reducing the size of images is to ensure that the size (width/height) of each image is identical to the width/height of the applet itself. Whilst the applet will always resize the images to fit perfectly, if your applet is (say) 300 x 300 pixels on the web page, and the images you are using are 600 x 600, even though the images will be resized perfectly to 300 x 300, the images will be much larger (in K bytes) than is absolutely necessary, which means download times for your users will be increased. Support Remember, if you are struggling to set up your applet, or are having problems, we are here to help. Our support team can be contacted on support@javaobjects.net. Please supply as much information about your problem as possible, including the applet name you are having problems with, the HTML code you are using, and if relevant the URL of the site where the applet is being used. Color Hexadecimal Values : Color values used on HTML pages and Java applets are represented as six character hexadecimal values, where “000000” is pure black, “FFFFFF” is pure white, and ever other possible color combination can be found in between. The six digits in each colour value can be split into three 2 character Red, Green and Blue values. So, a value of “112233” means a Red value of 11, a Green value of 22 and a Blue value of 33. A note on Hexadecimal representation : As humans with, generally speaking, 10 fingers and 10 toes, we are used to the decimal number system, that is, a ten digit number system starting at 0 and going up to 9. When we reach 9, we “roll over” back to zero again and, of course, add a 1 to the left hand side to give 10. Whereas decimal has ten values per digit, hexadecimal has sixteen values per digit. The standard ten from 0 to 9, but then of course we run out of occidental numbers. So, we start using letters …. A for value 10, B for 11, C for 12, D for 13, E for 14 and F for 15. Once we reach ‘15’ (or F) we “roll over” back to zero again, and add that one to the left, giving 10 (which is the equivalent of value 16 in decimal) Here are a few example of hexadecimal (or “hex”) values and decimal values : Hex 1 = Decimal 1 Hex 9 = Decimal 9 Hex A = Decimal 10 Hex 10 = Decimal 16 Hex 1F = Decimal 31 Hex FF = Decimal 255 So, how do we turn “slightly light blue” into a series of 6 hexadecimal characters ? Well, the easiest way to do this, if you have a Windows operating system, is using the Paint package. Open up Paint, then choose the menu options Colors / Edit Colors. Click on the Define Custom Colors button to bring the color wheel up like this : <> Choose the desired color you are after using the large color area, and chose the shade using the slider on the right. Here we have chosen that light blue colour we love so much. On the bottom right hand side you can see that there are three values – Red, Green and Blue. But these values are represented in decimal (not hex) which is no use for web work. We know our RGB values, we just need to convert them to hex ! The easiest way to do this is as follows. Let’s take the Red value, 84. Divide 84 by 16 to get 5.25. At this point all we are bothered about is the integer part of this result, i.e. the 5. That’s our first digit. Take the 5 and times that by 16 to give 80. Take 80 from the original number (84) to give a remainder of 4. That’s our second digit. So, the two characters which represent Red in hexadecimal is “54”. Carry on and do the same for Green and Blue. Let’s work through Green first. 175 / 16 = 10.9375. Forget the .9375 and concentrate on 10. We already know that in hex the value 10 is represented by the letter A so ‘A’ is our first digit. 10 * 16 = 160. 175 – 160 equals a remainder of 15. 15 we know is F in hex. So, our Green value is ‘AF’ Finally blue. 203 / 16 = 12.6875. Drop the .6875 to give 12, which is ‘C’. 12 * 16 = 192. 203 – 192 = 11 (or ‘B’). So, our Green value is ‘CB’ Put the three values together, and we arrive at a color value for “slightly light blue” of “54AFCB” ….. result ! If this seems a little long winded or complicated, don’t worry. Try this a few times, and pretty soon this will become second nature. Examples : <> Black 000000 White FFFFFF Light Gray B0B0B0 Dark Gray 808080 Red FF0000 Green 008000 Blue 0000FF Dark Blue 000080 Bright Green 00FF00 Purple 800080 Light Purple FF00FF Brown 800000 Cyan 00FFFF Yellow FFFF00 License Information Standard Software Disclaimers and Conditions Fugazi Consulting Ltd hereby grants you a non-exclusive license to use its accompanying software product provided that : 1. The Licensee does not redistribute the software, unless authorised to do so by Fugazi Consulting Ltd. 2. The Licensee does not utilize the software in a manner which is disparaging to Fugazi Consulting Limited. 3. No attempt is made to modify, translate, reverse engineer, decompile, disassemble or create derivative works based on the software. 4. No attempt is made to rent, lease, transfer or otherwise transfer rights to the software, or remove any proprietary notices or labels on the software. This license does not grant you any automatic right to any enhancement or update. Title, ownership rights, and intellectual property rights in and to the Software shall remain with Fugazi Consulting Ltd. The Software is protected by the international copyright laws. Title, ownership rights, and intellectual property rights in and to the content accessed through the software is the property of the applicable content owner and may be protected by applicable copyright or other law. This License gives you no rights to such content. Java applets which are provided by this site on a free basis are offered "as is" without a warranty of any kind. Pertaining to all software, all expressed or implied conditions, representations and warranties, including any implied warranty of merchantability, fitness for a particular purpose or non-infringement, are hereby excluded. Fugazi Consulting Ltd and it's licensors shall not be liable for any damages suffered by licensee as a result of using, modifying or distributing the software or it's derivatives. In no event will Fugazi Consulting or it's licensors be liable for any lost revenue, profit or data, or for direct, indirect, special, consequential, incidental or punitive damages, however caused and regardless of the theory of liability, arising out of the use of or inability to use software, even if Fugazi Consulting has been advised of the possibility of such damages. This software is not designed or intended for use in on-line control of aircraft, air traffic, aircraft navigation or aircraft communications; or in the design, construction, operation or maintenance of any nuclear facility. Licensee represents and warrants that it will not use or redistribute the software for such purposes.