Annotated images

Use annotated callouts to describe parts of the image. An annotated image has numbers on the image that correspond to an ordered list immediately following the image.

Annotated callouts can be translated without changing the underlying image, and if the image does change for the locale, it is easy to swap it out with the locale-specific image.

Layer 14123

  1. Logo, click to return to home screen

  2. Employees can sign-in

  3. Search across the site — try to keep the list entries short; this entry has really long text so I can see what happens when the text wraps to a new line; as you can see, it is not so desirable; so, try to keep the entries short and concise

  4. Content items that the user has authorization to see

Details:

  • In the parent Ordered List (ol), outputclass attribute, assign: callouts This allows us to format the published list.

Here's an overview of using Heretto to create an annotation:

Important: When the callout is outside the edge of the image, the callout will be outside of the image when rendered on the web page. Which might not be the desired result.

Callouts overlap with the text above the image

Instead, leave room in the original image to account for the callouts.

More tp padding improves visibility