Step 8

When you saved the image file in Step 6, you also created an Image Map file. If the name of your image file was hotspot.jpg then the image map file will be called hotspot.html in the same directory. Load this file into your text editor, it should look something like the following table. As you can see, the hotspot coordinates have all been worked out for you by Xara X. We are going to copy the coordinates from this Image Map file to the template file you downloaded in the last step.

<img src="file:///F:\Hotspot Tutorial\hotspot.jpg" usemap="#hotspot" border="0">
<MAP NAME="hotspot">
<AREA SHAPE=RECT HREF="RedLight" TARGET="_self" COORDS="403,194,433,224">
<AREA SHAPE=RECT HREF="Pointer0" TARGET="_self" COORDS="111,181,147,247">

<AREA SHAPE=RECT HREF="Button1" TARGET="_self" COORDS="591,33,719,56">
<AREA SHAPE=RECT HREF="Pointer1" TARGET="_self" COORDS="553,181,589,247">

<AREA SHAPE=RECT HREF="Button2" TARGET="_self" COORDS="591,78,719,101">
<AREA SHAPE=RECT HREF="Pointer2" TARGET="_self" COORDS="596,181,632,247">

<AREA SHAPE=RECT HREF="Button3" TARGET="_self" COORDS="591,123,719,146">
<AREA SHAPE=RECT HREF="Pointer3" TARGET="_self" COORDS="646,181,682,247">

<AREA SHAPE=RECT HREF="TextBox" TARGET="_self" COORDS="408,25,576,154">
</MAP>