Hotspots

Hotspots or image maps are defined areas of an image that are hyperlinked. You can create hotspots on images in Contribute, and hyperlink the hotspots to the desired locations. For example, you can create hotspots for different countries on the world map, and hyperlink the hotspots to URLs containing information about the countries.

Hotspots are not visible when you view the page in a browser. A hyperlink indicator appears when the user hovers the mouse over the hotspot. Hotspots are displayed only in the edit mode to help you edit their properties.

    Create hotspots

    1. In your draft page, click the image on which you want to create a hotspot. The Image hotspot Tools appear on the image toolbar.

    2. Select a shape tool to create the hotspot. The hotspot can be a rectangle, circle, or a polygon.

    3. Create a hotspot on the image by doing any of the following:

      • Create circular or rectangular hotspots by clicking on the image and dragging to the required dimension.

      • Create polygonal hotspots by defining the points of the polygon using mouse clicks.

    4. In the Hotspot Properties dialog box, do the following:

      • Link (HREF) - Specify the URL of the hyperlink for the hotspot.

      • Target Frame - Specify the target frame as Default, Entire Window, or New Window. Based on the selection, the destination page of the URL opens in the current or a new browser window.

      • ALT Text - Specify the text that is displayed when the user hovers the mouse over the hotspot area. This text is also read aloud by screen reader software.

    5. Click OK to complete hotspot creation.

      You can click Publish to publish your changes to the website.

    Edit hotspot properties

    1. Do one of the following:

      • Double click the hotspot.

      • Select the hotspot and click the Hotspot Properties icon in the image toolbar.

      • Select the hotspot, right-click, and select Hotspot Properties from the context menu.

    2. In the Hotspot Properties dialog box, change the values for the various options as required.

    3. (Optional) You can use the options in the context menu to do the following:

      • Align hotspots in relation to each other.

      • Resize hotspots in relation to each other.

      • Reorder the position of the hotspots. For example, you can move a hotspot over another so that when they are positioned on top of each other, the order is maintained.

      • Cut, copy, or paste the hotspots to the clipboard.

    Select, move, resize, or reshape hotspots

    1. Click the image containing the hotspot.

    2. Select the pointer tool from the image hotspot tools.

    3. Click the hotspot that you want to select. To select multiple hotspots, press Shift, and then select the hotspots.

    4. To move hotspots, select the hotspots, and drag the hotspots to another location using your mouse. You can also use the arrow keys on your keyboard to move the hotspots.

    5. To reshape or resize the image, move the cursor to the drag points of the selected hotspot. When the hollow pointer appears, drag the mouse to resize or reshape the hotspot to the desired dimension or shape.

      Note: When you resize the image, the hotspots in it are proportionally resized.

    6. To delete, select the hotspot and press the Delete key.