Using image maps

Amaya

## Using image and maps

### Adding an image

To insert an image, choose Image from the Insert menu, click the image button, or use the keyboard shortcut (`Ctrl-h` `Ctrl-i`). The resulting dialog lets you enter

- the file name
- the alternate text (`alt` attribute) of the image
- and the position (inline, on the left side, centered, on the right side)

Note: the alternate text is mandatory. You must provide a short description of the image in the corresponding field or confirm twice.

To help find an image file you can enter a filter, and use the filter button, and the dialog will list only the files that match your pattern.

To provide a long description for an image presenting complex information, you should do so in a separate document and link it by providing the URI as a `longdesc`. This command is also available on the Attributes list.

### Replacing an image

If an image is selected (do so by dragging over the image) when opening the image dialog, the selected image is then replaced by the new image.

### Resizing an image or a map area

After you have inserted an image or defined an area within an image map, you may need to resize it.

To resize the image or map area directly on the screen:

1. Select the image or the area of the image map to display handles.

   When you click on an image, Amaya selects the left or right border of the image to let you insert a text before or after the image.

   To display image handles, you have to:

   - either select a border and press `Esc` or `F2`,
   - or drag over the image
2. When selecting a handle with the left button of the mouse and moving the mouse with the left button down you are able to resize the image or the area as you want.
   - Corner handles let you resize both the width and the height.
   - If the `Shift` key down, the ratio between the width and the height of the image is kept.
   - Other handles let you resize either the width or the height.

You may also edit attributes.

### About alternative text and long descriptions

Without useful alternate text for images, many web pages become difficult or even impossible to navigate, and users are left "feeling their way in the dark."

To prevent this problem, you must provide alternate text for elements such as images and other multimedia objects. The alternate text is usually presented instead of the image by a browser with a voice output system, or on a Braille display used by many people who are blind. It is also common for users with low-quality connections to request the alternate view, because text is transmitted much faster than images.

The alternate text should replace the image in function as well. For example, if you use the image as an icon that links to a reference point, then the title of the reference itself is a good alternate text.

There are cases where an image is used for purely visual effect, and does not add any information value to the page. In this case, it is appropriate to use a blank alternate text, although you must still define it.

When the image conveys important information that is not available from the text of the document, you must provide a description of the information. The `longdesc` option in the Attributes tool enables you to link a description to the image. This description can be a URI (a separate document), or named part of the current document.

To view how a page might be presented without the images, use show alternate (Views /Show alternate). If the page is spoken by a voice output system, then the alternate view might simply be read out.

### Using client-side image maps

Amaya enables you to use client-side image maps.

To activate an area in an image map

- Double-click on the area within the image. Amaya finds the URI associated to this area, and opens it in the browser.

To display the existing areas within an image map

- Select Show map areas from the Views menu.

  Note: You can also display existing areas directly from the keyboard with `Ctrl-u Ctrl``-m`.