Creating images with multiple hot spots
You can use OpenOffice.org to create nice interactive banners for your web page within a few minutes.
- Open a new Draw page.
- Click the Rectangle icon down in the Drawing toolbar, then drag a rectangle on your screen.
- Click the Area Style/Filling listbox and select a color for the area.
- Double-click the area to get a text cursor.
- Type your text, then select the text. Use the controls on the Text Formatting toolbar to select a font, foont size, and font color.
- Use space characters for the spacing between words.
- Right-click the rectangle, then choose Convert - To 3D.
- Click the Rotate icon on the Drawing toolbar. (It is the default icon for the Mode toolbar, so you will see Effects as the name of the Rotate icon. We don't need to understand this at this moment.)
- Using the Rotate tool, rotate the 3D rectangle to give a pleasant view effect. You can also use the 3D Effects dialog for many more effects. Press Ctrl+Z to undo an effect that you don't like.
- Export the finished graphic into a bitmap format that a modern web browser can read. Let's choose PNG format.
- Select the graphic. Choose File > Export. In the Export dialog, be sure that "Selection" is enabled, so you export only the selected graphic. Open the File format listbox and select PNG. Enter a file name and click Export. For some file formats, you will get a dialog to select additional options.
- Open a new Writer document.
- Choose Insert > Picture > From file, and select your picture.
- Choose Edit > ImageMap to open the ImageMap Editor.
- In the ImageMap Editor, click the Rectangle tool and drag a rectangular area to define the first hot area.
- Enter the address for the hyperlink. Click the green Apply icon at the left to apply this edit. Then you can define the next hot area and so on. Close the dialog with the x icon in the dialog title bar. No need to use the Save icon inside the ImageMap Editor unless you need a special ImageMap file of its own.
- Save your text document as an ODT file, then "Save as" using the File type "HTML document".
You can already use the resulting HTML file on your web page. But may be you want to see the HTML code to fine-tune the pixel addresses of the hot areas, for example.
- Close the HTML document in Writer.
- Choose File > Open.
- In the Open dialog, open the File type listbox and select "Web pages". Double-click your HTML file. You now see the document open in Writer/Web.
- Choose View > HTML Source to view the HTML source.
You can edit the HTML source directly. For example, edit the second and fourth parameters of the COORDS tags to be the same, or change the ALT texts that appear as mouse-over texts.