Corel Painter Help | Creating image maps

Creating image maps

To define a default URL for an image map

An image map is a web feature that lets you jump to different locations by clicking specific areas within an image.

There are two types of image maps:

• Client-side image maps store image map information right in your HTML document. URL information appears at the bottom of the browser window when a pointer is moved over the mapped areas.

• In a server-side image map, image map information is saved in a separate file that is stored on a server and accessed by a Common Gateway Interface (CGI) script. Coordinate information, not URL information, is displayed at the bottom of the browser window when a pointer is moved over a mapped area.

Client-side image maps are faster and more efficient because all the image information is present in the HTML code for the page. A server-side image map, in contrast, requires an extra round trip of information between the browser and the web server. However, client-side image maps are not supported by very old browsers.

When a hotspot is clicked (left), the browser jumps to the page referenced by that link (right).

Client-side image mapping

A client-side image map is an image that has "hotspots" directly associated with URL information. When a hotspot is clicked, the browser jumps to the page referenced by that link.

A client-side image map recognizes circular and rectangular "hotspots." Therefore, Corel Painter treats a circular area as a circle and a rectangle as a rectangle. Oval areas are exported as rectangles.

Image maps are created using layers. The size of the layer determines the clickable area. For more information, see Layers.

The size of the layer determines the size of the clickable area, or hotspot.

Server-side image mapping handles circles and ovals differently. With server-side mapping, you can export ovals. For more information on server-side image maps, see Creating server-side image maps.

To define a client-side image map

1 Select or create a layer or shape in the exact place in your image where you want a link created.

If you can’t see the layer’s marquee, click the Layer options button

in the Layers panel, and choose Show Layer Indicators.

2 Click the Layer options button

, and choose Layer Attributes.

3 In the Layer Attributes dialog box, specify a name for the layer.

4 Enable the WWW Map Clickable Region check box.

5 In the URL box, specify a URL to associate with this portion of your image (for example, http://www.painterartist.com).

6 Click OK to return to the image.

7 Deselect the layer, and then define the next area of your image map.

If there are two or more overlapping areas in an image map, the topmost one takes priority.

8 Export your image to the GIF or JPEG file format. In the Save As GIF Options or Save as JPEG Options dialog box, enable the Client Side Map File check box to indicate that Corel Painter should export an HTML file containing the image map definition.

The RIFF format contains data about your image that is lost when you convert it to GIF or JPEG. If you want to edit the file later, save a RIFF copy before you generate a GIF or JPEG version.

When a client-side image map is exported, Corel Painter exports both the image and an HTML file. You can then open the HTML file in a text or HTML editor and copy the code into another web page.

To define a default URL for an image map

1 To define a default, or base, URL to use when a user clicks outside the defined hotspot areas in an image map, choose File

Get Info when no layers, shapes, or plug-ins are selected.

2 In the File Information dialog box, enable the WWW Map Default URL check box.

3 Enter a URL address.

4 Click OK.

If you don’t provide a default URL, clicking outside the defined hotspot areas has no effect.