Hotspot Guest Tutorial  Page 6
HOME
1
2
3
4
5
6
7
8

Step 9

The width and height parameters are taken from the image you exported from Xara X, but remember that the applet will only be displaying one half of the image at one time - so the width parameter that goes in here must be one half the width of the exported image.


<applet code="hotspot.class" codebase="hotspot" archive="hotspot/hotspot.jar"
width=
380 height=260>
 

The next line identifies copyright for the applet. The applet will not run without this.


<param name="copyright" value="www.stopscreaming.co.uk">
 

Next, the bgcolour parameter (you can also spell it bgcolor if you like) specifies the background colour of the web page. In our case it was 5% grey or #e5e5e5.


<param name="bgcolour" value="#e5e5e5">
 

The image parameter identifies the relative URL of the image file. You are going to copy it to the hotspot directory of your website.


<param name="image" value="hotspot/hotspot.jpg">
 

"soundover" and "soundclick" are both optional parameters and indicate AU sound files to be played when the mouse passes over and clicks a nominated hotspot. The click.au file is already included in the hotspot java applet zip file you will be downloading in the next step.


<param name="soundover" value="hotspot/click.au">
<param name="soundclick" value="
hotspot/click.au">
 

Paste the coordinates of the textbox area from the Image Map file into the textbox parameter as shown (note: your coordinates are likely to be different that mine in this example, so use the ones from your image map and not the ones in this diagram).


<param name="textbox" value="408,25,576,154">
 

The colour parameter identifies the colour of the text to be shown in the textbox. In this case I have chosen white. This could also have been entered in hexadecimal format. The standard java colour names that are recognised are black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white and yellow.


<param name="font" value="Helvetica,plain,12">
<param name="colour" value="white">
 

The border parameter defines a border area within the textbox area. Because the textbox area in the example has rounded corners, I have chosen quite a wide boder of 30 pixels. The align parameter requests that the text should be displayed centred; other possible values are left and right aligned. You can spell centre as center if you prefer.


<param name="border" value="30">
<param name="align" value="
centre">
 

The area1, area2 parameters identify a sequence of hotspot areas that are to be swapped whenever the mouse pointer passes over any hotspot. You can have as many areaN (N=the number) parameters as you like. In this case, these are the red light and the resting pointer objects. Paste in the coordinate data from the image map file here.


<param name="area1" value="403,194,433,224">
<param name="area2" value="
111,181,147,247">
 

We are now entering the home straight. Each hotspot area is defined by a sequence of pN parameters. The first of these, called somewhat uninspiringly the p1 parameter, indicates the coordinates of a hotspot, the linking URL and, optionally, the name of a target browser frame. In the case of this example, I have chosen the linking URL to be www.xaraxone.com and the frame name to be test. You can copy in the relevant coordinate data for this hotspot from the Image Map file. I have called my hotspot objects Button1, Button2 and Button3.


<param name="p1" value="591,33,719,56,http://www.xaraxone.com,test">
 

The next pN parameter is the P1area1 parameter. This identifies a list of secondary areas to be swapped when the mouse pointer passes over the controlling hotspot (ie the one defined by the associated p1 parameter above). Enter the coordinates for the secondary swap areas. In the example, I have called these Pointer1, Pointer2 and Pointer 3. Each hotspot (i.e. p1 parameter) can have as many related pNAreaN parameters as you like (e.g. p1area1, p1area2 etc.)


<param name="p1area1" value="553,181,589,247">
 

Finally, there is the optional pNtext parameter (e.g. p1text, p2text etc). This specifies the text to be displayed within the textbox whenever the mouse pointer passes over the controlling hotspot. Multiple line entries are indicated with a | character.


<param name="p1text" value="Congratulations !|You have located|Button 1">
 

Repeat the grouping of pN parameters for each hotspot. In the case of this example, p1, p2 and p3 groupings are shown.


<param name="p2" value="591,78,719,101,http://www.xaraxone.com,test">
<param name="p2area1" value="
596,181,632,247">
<param name="p2text" value="
Congratulations !|You have located|Button 2">

<param name="p3" value="591,123,719,146,http://www.xaraxone.com,test">
<param name="p3area1" value="
646,181,682,247">
<param name="p3text" value="
Congratulations !|You have located|Button 3">

</applet>