How to Create Image Map Hotspots in CorelDRAW

Creating clickable image map hotspots in CorelDRAW allows you to define specific areas of a graphic that link to different web addresses when published for the web. This guide walks you through setting up vector hotspot shapes, assigning URLs and alternative text, and exporting the final artwork with the corresponding HTML image map code.

Step 1: Prepare Your Artwork and Shapes

  1. Open your project in CorelDRAW and ensure your base graphic or layout is finalized.
  2. Select any vector drawing tool (such as the Rectangle, Ellipse, or Freehand tool) to draw a shape directly over the region of the image you want to make clickable.
  3. Keep the shape selected. (Note: The fill and outline can remain visible during design, as CorelDRAW allows you to render them transparent upon export).

Step 2: Enable the Internet Toolbar

  1. Go to the top menu and select Window > Toolbars > Internet.
  2. The Internet toolbar will appear on your workspace, providing fields to configure web-related object properties.

Step 3: Assign the Hotspot and URL

  1. With your drawn hotspot shape selected, locate the Internet toolbar.
  2. In the URL text box, type the complete destination web address (e.g., https://www.example.com).
  3. Set the Target frame depending on how you want the link to open:
    • _blank to open in a new browser tab or window.
    • _self to open in the same frame or page.
  4. Enter descriptive text into the Alt comments field to provide accessible screen-reader text and tooltips for the link.

Step 4: Format the Hotspot Shape

  1. To prevent the drawn hotspot shape from covering your design, select the object and open the Properties docker (Window > Dockers > Properties).
  2. Set the Fill to No Fill (None) and the Outline to None. The link data remains attached to the transparent vector path.

Step 5: Export the HTML Image Map

  1. Go to File > Export for > Web (or File > Publish to the Web > HTML, depending on your CorelDRAW version).
  2. Choose your preferred web image format (such as JPEG or PNG).
  3. Ensure the option to generate an HTML Image Map (or include URL data) is checked in the export settings.
  4. CorelDRAW will generate the image file alongside the necessary <map> and <area> HTML code, ready to be embedded directly into your website's source code.