Working with images

Images are represented in HTML documents by IMG elements. These elements have no content, but require a URL pointing to the image file. The most common image format on the Web is the GIF format; all Web browsers, with the exception of line-mode browsers, can display images in this format inline, in the document window. JPEG format is also very popular and is accepted by more and more browsers. HoTMetaL PRO can display graphics of many different formats, including BMP, PNG, JPEG, GIF, and others; however, not all browsers can. Your graphics should be in GIF or JPEG format if you want to display them on the Web.

Files in other graphical formats are normally displayed by launching external applications. HoTMetaL PRO follows the same approach.

This chapter also gives information on creating clickable image maps.

Inserting images

You can insert an image in two ways:

• Clicking on the toolbar button.
• Inserting an IMG element using Insert Element... command in the Markup menu.

If you use the button or Insert Element..., HoTMetaL PRO inserts an IMG element and displays the Image Attributes dialog box.

Since the IMG element can't have any content, you won't be able to insert it if the document contains a selection.

Editing image properties

The Image Attributes dialog box is used to edit the properties of an image. This dialog box appears when you insert an image from the toolbar. You can bring up this dialog three ways:

• Double-click on the image.
• Right-click inside the image element and choose Image Attributes from the pop-up menu.
• Click once on the image and choose Image Attributes... from the Tools menu.

Image file

The Image File text entry box in this dialog box is for entering the URL for the image. This information is required. You can type the URL directly into the text entry box if you want, or click on the [Edit URL...] button. This will give you a dialog box called Edit IMG Source that is almost identical to the Edit URL dialog box. The only difference is that it doesn't have the `Name/ Query' control group, as this information does not apply to images.

• Enter the URL. If you need more information on URLs, see the Links chapter.

Alternate text

The Alternate Text text entry box is for entering some text that will be displayed if the document is being read with a browser that can't display images or one that has image loading turned off. Even though this information is not required, it is good HTML style to include it for the benefit of users without graphical browsers.

Alignment

The default alignment for images is BOTTOM, meaning that the bottom of the image will be on the baseline of the adjacent text. You can also set the image alignment to the following:

• MIDDLE: aligns the baseline of the current line with the middle of the image.
• TOP: image aligns with the top of the tallest item in the line.
• LEFT: image `floats' on the left margin and text wraps around it to the right.
• RIGHT: image `floats' on the right margin and text wraps around it to the left.
• TEXTTOP: image aligns with the top of the tallest text in the line.
• BASELINE: same as BOTTOM.
• ABSMIDDLE: aligns the middle of the current line with the middle of the image.
• ABSBOTTOM: align the bottom of the image with the bottom of the current line.

Not all of these image alignments are supported by all browsers, so use them with caution and make sure that your page looks acceptable on several different browsers. LEFT and RIGHT alignment for images can also be set from the toolbar. If you want to center an image, surround it with a block element (such as P) which you can then center-align.

Width and height

When you insert an image HoTMetaL PRO will automatically set the HEIGHT and WIDTH attributes of that IMG element for you. These attributes are measured in pixels; they tell the browser how large an image is. This will speed download times and page formatting. HEIGHT and WIDTH are not supported by all browsers, but do make a large difference to how fast a web page formats in many browsers. If you wish to change these attributes, you can edit them by bringing up the Image Attributes dialog box.

Displaying images in HoTMetaL

If the URL of an IMG element refers to a GIF, JPEG, BMP, PNG, or TIFF file on your local system, HoTMetaL PRO will normally display it in place in your document.

In the Defaults for New/Open section of the Options dialog box, you can choose whether such images should be displayed in place or not. This choice will then apply by default to all new documents. You can override the Options setting for individual documents using Show/Hide Inline Images in the View menu. If you don't want images to be displayed in the document, choose Hide Inline Images. The command will then toggle to Show Inline Images: if you choose this command, HoTMetaL PRO will resume displaying inline images.

Note: Not all Web browsers can display this range of image file formats. If you want your Web pages to be viewed by the broadest possible audience, make sure that your images are in GIF or JPEG format.

Image maps

Image maps (or clickable image maps) are images that have been divided into regions; clicking in a region in a browser causes an action to occur. There are two types of image maps: client-side and server-side. Both types of image maps require a list of the co-ordinates that define the mapping regions, and which URLs they are associated with. Server-side image maps require this list to be in a separate map file, which is associated with the image by a program running on a Web server. Client-side image maps include the co-ordinates and URLs in the HTML document itself, in an element called MAP, and are linked to the image by the Web browser.

Note: Most Web browsers support the use of server-side image maps, but client-side image maps are becoming increasingly common. Use both features with caution, and note that good HTML style involves giving clients who do not have access to image map features an alternate way of accessing different Web pages, such as a text-only list.

Creating image map files

An image map file is a file that tells the server what to do when someone clicks in an image map. In this file you put the coordinates of the regions in the image that you want to map, and the URLs that you want the server to access for each region.

Format

Here is a sample of an image map file (the URLs in this example don't refer to real files, so please don't try to use them!):

default http://www.sq.com/heads/missed.html
circle http://www.sq.com/heads/righteye.html 10,25 10,30
rect http://www.sq.com/heads/mouth.html 10,15 20,10
poly http://www.sq.com/heads/nose.html 15,20 20,25 25,20

Notice the following about the sample file:

1. The first line, starting with the word `default', specifies the action that should take place if someone clicks in a part of the image map that isn't mapped to anything. This URL should refer to a file that tells the user to try again.
2. The other lines each specify the type of region that's being mapped, then the URL that's accessed when you click on the region, and lastly the coordinates of the region.
3. You can define three kinds of regions in an image map:
   • a circle: the coordinates of a circle consist of the coordinates of the center point of the circle (in this example `10,25') and the coordinates of any one point on the boundary of the circle (here it's `10,30').
   • a rectangle (rect): the coordinates of a rectangle consist of the coordinates of upper left corner of the rectangle (in this example ` 10,15') and the coordinates of lower right corner of the rectangle (here it's `20,30').
   • a polygon (poly): a polygon is any enclosed figure consisting of straight lines (you can't specify an oval shape, for example, unless you approximate it with straight lines). A polygon may have a regular shape (such as a hexagon) or be completely irregular (for example, the outline of a face). The coordinates of a polygon consist of the coordinates of each vertex (corner) of the polygon.
   All coordinates are measured in pixels. The origin-the point (0,0)-is at the upper left corner of the image. x values (the first number in the coordinate pair) increase as you go to the right, and y values (the second number) increase as you go down.

Creating the file

The most time-consuming part of preparing an image map is figuring out the coordinates of the different regions. There are two kinds of programs you can use to do this:

• The most convenient tool is one that knows about the image map file format. Such a program will let you indicate graphically the regions you want to map, and will generate an image map file for you (probably without the URLs-you'll have to add these yourself).
• A graphics viewer that displays the coordinates (in pixels) when you click on a point in the image. In this case you'll have to record each coordinate pair individually.

If two or more entries in the image map file happen to include the same part of the image, then the first such entry in the image map file is the one that the server uses to determine what action to take.

Server side image maps: `Anchoring' the image map file to your image

If you create a map file with HoTMetaL PRO, an A element will be created around the image. This anchor associates the map file with the GIF image that you want to display. You are generally going to be creating a map file on your system, and you will have to upload the file to your service provider so that it works on the Web. The following instructions apply to setting the URL of the anchor which surrounds the image so that it points to the map file on the server.

In order to understand what's going on here you have to know that there is a program called imagemap on the server, which reads your image map file whenever someone clicks on the image. The browser sends the program the coordinates of the point that was clicked on. The imagemap program determines which region in the image was clicked on, and on the basis of this, tells the server which URL to access.

You use a URL to associate the image map file with your image. This URL tells the server two things:

• The location (server address and directory) of the program imagemap.
• The symbolic name for your image map file.

A typical location for the imagemap program is the cgi-bin directory on the server. In this case, the URL (in an A element) would look something like this:

http://www.sq.com/cgi-bin/imagemap/brundlefly

(Here `brundlefly' may look like a filename, but it's actually the symbolic name of the image map file).

You will have to edit the URL of the anchor that has been created, so that it points to the correct position on the server.

• Use Edit URL... in the Markup menu to change the URL of the A element to a value such as the one in the example.
• Change the URL of the IMG to point to the location of the GIF image on the Web server. (This is usually done by changing all the URLs in the document at once with the Publish... command.

Server-side image maps: informing the server

Not all Web servers deal with image maps in exactly the same way. For this reason, the instructions given here may not work for your server. The following discussion is based on the Unix NCSA httpd server; with the exception of the instructions in the following two paragraphs, the instructions here should apply to all servers. You should consult your server's documentation or a knowledgeable person if you're unsure whether something applies to your situation.

Once you've created the image map file, you need to tell the server where it is. If you're using the Unix NCSA httpd server, you would do this by making an entry in the file imagemap.conf in the conf directory on the server. (You'll have to find out from a local administrator where the server directory is located.) If you're using a different server, the filenames given in this section may not be correct: you should consult the server documentation or talk to an administrator.

The imagemap.conf file consists of entries that associate a symbolic name with every image map file known to your server. One line describes each map. You can choose whatever symbolic name you wish to use. In this example, the symbolic name is brundlefly, and the image map file is in /home/rodney/public_html/heads.map. You should put the following line in the imagemap.conf file:

brundlefly:		/home/rodney/public_html/heads.map

If someone else is administering the server, you may not be able to update this file yourself. You'll still have to choose a symbolic name for your image map file, because this name is used in the next step.

Testing your image map

To see if what you did worked:

• Choose Preview... from the File menu.
• In the browser, click in each of the regions you defined to make sure that the `right thing' happens.

All the files must be on the server and you must have an Internet connection active in order for this to be successful.

How client-side image maps work

All of the links for a client-side image map are specified within an HTML document. Client-side image maps are generally faster than server-side image maps because the browser does the work, not the server.

Associating an IMG with a MAP

In order for the browser to know which MAP to use for a particular image, the USEMAP attribute of the IMG element must point to that MAP. The value of this attribute must be a URL that refers to the MAP element for this image map.

The URL will start with a `#' character, followed immediately (no spaces) by the name of the MAP element (that is, the value of the MAP's NAME attribute).

It is possible to create and reference MAP elements in other documents; in this case, the URL must be edited manually. The `#' and the name of the map would be immediately preceded by the other document's URL. For convenience, the MAP element is often placed directly after the IMG element for the image map. The MAP is not displayed in the browser window.

MAP has one attribute, called NAME. The value of this attribute is the map name, a string of characters that is used to identify the MAP, so that an IMG element can refer to it.

The MAP element contains one or more AREA elements, each of which defines a region in the image map. An AREA has the same function as a line in an image map file. AREA doesn't have any content: all of the information is contained in its attributes.

You can use both the standard (`server-side' or ISMAP) image map processing and a `client-side' (USEMAP) MAP for the same image. If the browser viewing the file supports client-side image maps, then this method of processing the image will be used. If the browser does not support client-side image maps, then it will refer to an image map file on the server.

Extensions to images

The IMG element has been extended to use certain other attributes. To edit any of these attributes, right-click choose Element Attributes... from the Markup menu, or type Ctrl+] at the keyboard.

Some browsers support the image attributes BORDER, VSPACE and HSPACE.

• BORDER: sets the border around the image in pixels. This can be set to `0', which creates a borderless image, often useful when making `hot images'.
• Specify blank space on the top and bottom (VSPACE) and on the sides (HSPACE) of an image. The value is in pixels.

Internet Explorer supports the following attributes of IMG for playing video files:

• DYNSRC - lets you specify the URL of a video clip or VRML file. If the file is displayed in a browser that does not support this feature, the image referred to by the SRC attribute will be displayed.
• START - this attribute specifies when the video file will be played. The value FILEOPEN causes this to happen as soon as the HTML document is opened; the value MOUSEOVER causes the video to be played when the mouse cursor is over the animation. If you supply both values, the video will be played in both situations.
• CONTROLS - If this attribute has the value CONTROLS, a set of controls will be displayed under the video.
• LOOP - specifies how many times the video should be played. The value `-1' or INFINITE will cause it to be played `infinitely'.
• LOOPDELAY - the wait time between plays (in thousandths of a second).

Editing images

You can view and edit images that are included in a document in HoTMetaL PRO.

• Click on the image and then choose Edit... or or View... from the Tools menu.

Or:

• Right-click on the image, and from the pop-up menu that appears, choose View or Edit.

The Options... command lets you configure which editor and viewer programs that are launched from the pop-up menu (see the next section). If you have not chosen an image editor or viewer, a Choose Image Editor/Viewer dialog box will appear.

Choosing the editor and viewer

To select image viewers and editors:

• Choose Options... from the Special menu and open the Helper Apps section.

This dialog box lets you choose a default viewer and editor, and also choose viewers and editors for specific image types.

To choose the defaults, enter the full path of the applications in the Default image viewer and Default image editor text entry boxes. If you wish, you can use the [Choose...] buttons to navigate to and choose the applications.

To choose the viewer and editor for a specific image type:

• Enter the file extension for a particular image format in the text box to the right of the [<<Add <<] button. For example, if all of your JPEG images have the .jpg file extension, enter `jpg' in the text entry box and then click [<<Add<<]. You must add the extension before you can set the viewer/editor.
• Choose a viewer by entering the full path of the viewer program into the Viewer text entry box. Click on the [Choose...] button if you want to locate the viewer with a file chooser.
• Similarly, choose an Editor.

This adds the file extension to the URL Extension list and confirms your viewer and editor choices.

To delete an extension from the list, just select that extension and click on the [Delete] button.

If you want to change the editor or viewer associated with an extension, select the extension from the list and change the settings.

When you've made all the additions or changes, click on the Options dialog's [OK] button.