JavaScript Tip of the Week for December 9, 1996: Image Menus for Everyone | WebReference

JavaScript Tip of the Week for December 9, 1996: Image Menus for Everyone

JavaScript Tip of the Weekfor December 9, 1996: Image Menus for Everyone 

I'll be straight with you, there's no way to directly redraw images onto a page in Netscape 2.0 or Internet Explorer 3.0 using JavaScript. But, there is a simple and effective way to do it in Java. I may be commiting hubris by releasing a Java tip on a JavaScript site, but trust me: this one's worth it (next week I promise I'll be back on JavaScript).

Below you is the classic JTotW table of contents. If you move your mouse over one of the images, you'll hear a small "pop" and a you'll see the triangle in the image lite up. If you then proceed to click on the image, the whole thing will highlight and you will hear a small clicking sound. Eye candy? Yes, of course. But what would the web be without it? Essentially, this is an improvement on the September 30 dynamic image menus tip; an added bonus is that it works in Interenet Explorer (as well as Netscape 2.0).
The applet itself is very simple: if the mouse is over it, it displays an image and plays a sound, if the mouse has clicked it, it displays another image, plays a different sound, and jumps to a specified page. All of these images and sounds can be customized easily by you. Each image has its own applet. In this case there are five images, so five applets, that look similar the one below, are used.

    <APPLET CODE = "dynimg.class" WIDTH = 148 HEIGHT = 27>
    <PARAM NAME = "inactive_image" VALUE = "this_week_inact.jpg">
    <PARAM NAME = "active_image" VALUE = "this_week_act.jpg">
    <PARAM NAME = "active_sound" VALUE = "drip.au">
    <PARAM NAME = "clicked_image" VALUE = "this_week_selected.jpg">
    <PARAM NAME = "clicked_sound" VALUE = "click.au">
    <PARAM NAME = "bgcolor" VALUE = "#FFFFFF">
    <PARAM NAME = "url" VALUE = "../this_week/index.html">
    <PARAM NAME = "target" VALUE = "_self">
    </APPLET>
Most of these parameters are self explanatory. "inactive_image" is the name of the image file that is displayed when the mouse is not over the applet. In other words, it is displayed when the applet is waiting idly. "active_image" is the image that is displayed when the mouse is moved over the applet. In this example, the only difference between "active_image" and "inactive_image" is that the former has a light orange arrow pointing to it. The next parameter, "active_sound", contains the name of the sound file (must be AU format) that is played when the mouse is moved over the applet. Both "active_image" and "active_sound" are optional; if you don't want to include either of the two, then delete the entire parameter tag for each (leaving the parameter's VALUE empty will not suffice).

A note about image formats: Java has built in image capabilities, but only for GIF and JPEG images. If you include any other type of image format, the applet won't work.

When the applet (image menu) is clicked, the image file specified in the "clicked_image" parameter is displayed. At the same time, the sound file specified in "clicked_sound" is played. Like "active_image" and "active_sound", "clicked_image" and "clicked_sound" are both optional. The "bgcolor" parameter allows you to specifiy a background color for the applet to dislpay before the images are loaded. Don't be alarmed, however, if the applet appears gray for the first second or two. This is due to the "slowness" of the Java applet's loading (not a problem with JavaScript).

The most important parameter is "url". It determines where the applet links to when it is clicked (actually when the mouse click is released). You do not need to put absolute URLs in the "url" paramter; just a relative URL. e.g. "/this_week/index.html". If you wish to target the URL to a specific window or frame, just include the name of the target in the "target" parameter. If you don't want to specifiy a target, just leave it at "_self".

Now how do you get this thing on your site? The only thing that you need from JTotW in the dynamic image class file, which you can download right here. Simply put the "dynimg.class" file your server and treat it like you would any other file. The file is only 3k, so your visitors should have almost no wait. What if your visitors don't have Java enabled browsers? Not a problem, just put the normal image and link in between the two applet tags. Here's an example:

    <APPLET...> 
    <PARAM...>
    <A HREF = "file.html"><IMG SRC = "image.gif"></A>
    </APPLET>

I think from now on I'm going to stick with JavaScript. So why did I do this tip? Well, because many of you asked how the dynamic image menus could be made to work in Netscape 2.0 and IE 3.0... I just thought I'd do the polite thing and tell you.

Source