1 Task description *

2 Solution description *

2.1 General Solution Description *

2.2 Class Properties *

2.3 Methods of Special Interest *

3 Program output *

3.1 Microsoft Windows *

3.2 Sun Solaris *

The task of this project is to develop a program in the Java programming language. After starting the program the user should see an image. When the user moves the mouse cursor on a special part of the image (e.g. „the picture of Lena") this part of the image should be changed to another image. When the users clicks this special part of the image and the Java program is embodied in a HTML-browser this HTML-browser should show a specified document, given by an URL.

A scheme for the solution is given.

The solution consists of a Java file and a HTML file. The Java file consist of a single class ImageMenuApplet which is derived from Applet and also implements two listener interfaces: MouseListener and MouseMotionListener. The HTML file contains a call of the ImageMenuApplet with the required parameters.

The applet gets passed six parameters from the HTML file:

• The location of the two images which will be shown, depending on the mouse’s position
• The location of the background image
• The position (x,y) of the upper left corner of the changing image
• The URL which will be shown when the user clicks on the changing image

The applet loads these parameters in its initialization phase. Images will be loaded using a MediaTracker object. Because the drawing of the image can take a lot of time an off-screen image will be used. This off-screen image will also be generated in the initialization phase. During the initialization phase the applet also adds itself as a MouseListener and a MouseMotionListener to be notified about these events concerning the mouse device.

After that the applet goes into an „idle" state and only acts in a „passive" way on mouse events. The two typical sequences look like shown in the following chart.

There are only a few property variables stored in the class. First there are three Image objects -two for the two changing images and one for the background image (changingImage1, changingImage2, backgroundImage). Additional to that, there is another Image object, which serves as a memory for the off-screen image (offscreenImage). Although the corresponding Graphics object can be gotten from the offscreenImage it is also stored in a class property, because it is easier to use (offscreenGraphics). The same applies for the Image object image. Which is only used in the paint() method and therefore could be created and used there. But for efficiency reasons it is announced as a class property variable.

Furthermore there is also a variable flag which contains the state of the changing image. Depending on which image should be drawn this flag is zero or one. Further variables are four integers which contain the size and the position (relative to (0,0) of the background image) of the changing image (changingImageXX). The applet expects the two changing images to have the same size.

Lastly, there is the property requestedURLString, which contains the corresponding value of the parameter RequestedURL.

2.3.1 The init() Method

This method handles the initialization of the applet. Therefore usually, if not done before, all class properties should be set to a value. The method first loads the images, specified by the parameters of the applet and then uses a MediaTracker to be sure all images are loaded before used. Therefore all images are added to the newly created MediaTracker and then its waitForAll() method is used to wait until all images are loaded and ready to use.

Further parameters are also loaded: requestedURLString, changingImageX, changingImageY. The size of the changing image is asked from the first changing image, assuming that it has the same size like the second one. The size is stored in the class’s variables changingImageWidth and changingImageHeight.

Additionally the applet itself registers as a MouseListener and a MouseMotionListener, Therefore the two corresponding listener interfaces are implemented. This requires to write an implementation for various methods, whereas only mouseReleased() and mouseMoved() are not empty - which means that the applet only reacts on these two events.

Lastly the double buffer and therefore the off-screen image is initialized by a call to the method makeDoubleBufer().

This method is quite short, but important. It initializes the double buffer. It creates an image with the width and height of the given parameters. These parameters should have the same values as determined by the size of the background image. After this the corresponding Graphics object is also created. Simply by a call to the image’s getGraphics() method.

This method simply checks, whether the given coordinates (x,y) are inside the area of the changing area or not. If so it returns true, otherwise false. The borders of the changing area are derived from the values of the class properties changingImageX, changingImageY, changingImageWidth and changingImageHeight.

This method is always called when the mouse button is released, which indicates the end of a mouse click. When the user has done so the browser should show the document specified by the parameter RequestedURL, but only when the mouse cursor is inside the changing image area. Therefore this method first checks, whether the mouse cursor is inside this area - by a call to isInsideBounds(). If it is, the AppletContext’s showDocument() method is called, which forces the browser to show the document, specified by the given URL.

This method will be called everytime the mouse is moved. Therefore this method first checks, whether the mouse cursor is now inside or outside the area of the changing area by calling isInsideBounds(). If it is inside the variable flag will be set to one and the repaint() method will be called, but only if the state of the variable flag changes (which means, that it was not one before). This is required, because otherwise the applet will be repainted everytime the user moves the mouse. This would be to time-consuming.

If the mouse cursor is moved outside the area of the changing image the variable flag will be set to zero and repaint() will be called in an equivalent way to the inside movement.

The update() method simply calls the paint() method.

The paint() method will draw the image depending on the state stored in the variable flag. Therefore firstly the variable image will be assigned to the corresponding changing image object, depending on the value of flag.

Then the off-screen image will be drawn. First a black background is drawn, then the background image and after that, depending on the values of changingImageX and changingImageY, the changing image will be drawn at the correct position.

After the off-screen image is drawn the whole off-screen image will be made visible by drawing it on the visible image, respectively its Graphics object at once. This guarantees, that the image is not jittery.

You can take a look at the running program and its output in the Internet at following address:

I also put the screen prints from two different operating systems here.

There are two images. One where the mouse cursor is positioned outside of the dog's picture (left picture) and one where the mouse cursor is positioned inside the dog's picture (right picture).

There are two images. One where the mouse cursor is positioned outside of the dog's picture (left picture) and one where the mouse cursor is positioned inside the dog's picture (right picture).