JavaObjects.net User Documentation Auto Scrolling Image Menu Note : Graphics only available on on-line or Word document formats http://www.javaobjects.net (c) Fugazi Consulting Ltd 2003 Overview A very small, very attractive menu which uses scrolling images to display a series of menu options to the user. Very graphical, very chic ! · Very small and fast to load · Eye catching, neat and very cool looking · Displays a list of images either vertically or horizontally · Scroll automatically and/or allow the user to take over control of the scroll at any point (by moving the mouse within the applet) · Any size menu, any number of images, any size of images · Configurable to scroll up or down, left or right · "Pause on hover" functionality for user friendliness · Set the target windows, scroll speed and URL's · Pause between menu options / images (optional) · Demo version available HTML Example Installation and Configuration Copy the above code (in bold) into your HTML (note, not the content !) of your web page, then copy the class file purchased from http://www.javaobjects.net into the same directory on your web server. You can have any number of image files, but they must all have the same height and width. Change the width (vertical list) or height (horizontal list) of the applet to be the same as width or height of your images (in pixels). We suggest that the height (vertical list) or width (horizontal list) of the applet is a multiplier of the image height (or width, accordingly). So if you have a vertical list of images, and the images are 25 pixels tall, the applet should be something like 100 pixels high (for 4 images on screen at any one time) or 125 pixels high (for 5 images on screen at any one time) and so on. You don’t have to do this, but it gives the best effect. There can be many more images than the height / width of the applet ... they will scroll round in turn (e.g. you may have 4 images on display at any one time, but 20 in the list of images to display). Images can be .GIF files or .JPEG files, created in a package such as Microsoft Paint. GIF files are smaller and quicker to load, but JPEG files allow more colours. You can customise your applet further by changing the following parameters (some of which are optional, i.e. can be omitted) : startpos The first image to display. Set to 1 for the first image to start scrolling with. picheight The height in pixels of each image. This must be the same for all images ! Only use if your images are listed vertically, i.e. orientation = 1 picwidth The width in pixels of each image. This must be the same for all images ! Only use if your images are listed horizontally, i.e. orientation = 2 speed The lower the number the faster the scroll. Obviously, the higher the number the slower the scroll ! Minimum 1 for fastest scroll, however some browsers may experience occasional flickers at values less than 10. pause (optional) The pause time in 1/1000ths of a second (e.g. 4000 = 4 secs) before the menu moves on to the next image. Leave this parameter off totally (i.e. do not have this line of HTML) for constant scrolling, or set to “0”. direction "up", "down", “left”, “right” or “none” accordingly. The direction of automatic scroll. See below for further information. orientation “1” for a vertical list of images, “2” for a horizontal list of images. See below for further information userscroll “yes” or “no. Do you want the user to take over control of the scroll. See below for further information. image_n a list of the menu images, starting at 1. You must have at least 2 images, but may have as many as you like url_n The URL to go to if the user clicks on this image / menu option. target_n The target window to open the URL in. Valid values of _top _self _parent or _blank. See URL Targets below for more info. Note : picheight and picwidth are exclusive, in other words you will only have one OR the other (depending on your orientation value) Note : there must be one url_n and one target_n parameter for every image_n parameter, as shown above, for example : So, if you have 5 images being displayed you will have five parameters called image_1 through image_5, five parameters called url_1 through url_5 and five parameters called target_1 through target_5. We recommend, for clarity of reading the HTML, that all the image parameters are grouped together, and all the url and target parameters are grouped together, however this is not necessary for the applet to work. User Scroll : You can allow the user to take over control of the scroll at any point by setting the parameter “userscroll” to “yes”. This means that when the user moves their mouse over the applet, to use the vertical scroll option as an example, when they move their mouse to the top of the list, the images will scroll down, and when they move their mouse to the bottom of the list, the images will scroll up. The scroll is graduated, so that the closer the user moves their mouse to the edge of the applet, the faster the images will scroll. There are two “steps”, or graduation to the speed of scroll. When the user has the cursor within 15% of the edge of the applet, the images will scroll at the speed set by your “speed” value. When the user has the cursor within 16%-30% of the edge of the applet, the images will scroll at double the value set by your “speed” value (i.e. at half speed) Orientation / Direction : If you have a vertical (1) list of images, it is natural to assume you will want to automatically scroll up or down. If you have a horizontal (2) list of images, you will probably want to scroll left or right. There is the possibility of having no automatic scroll at all, by setting the direction to “none”. In this situation, the list of images will appear static upon load … it is only when the user moves the mouse over the applet that the list of images will start to scroll. Version : 2.0 Date : May 2003 Known bugs : none 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. URL Targets URL Target Window parameters specify which browser window the destination URL will open up in, when the user clicks on a menu option or graphic (depending on the applet in question). Valid values : _blank – open in a brand new window, leaving this window still open _top – open in the current window, whole page _self – open in the current frame. Only really used when using frames on your page. _parent - open in the parent window. The most commonly used options will be _blank (new window) and _top (same window) which should cater for most scenarios. 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.