Image Hotspots places animated spots on an image. Hover a spot to show a title, some text and a link. On phones, visitors tap a spot instead.
Each image below is an Image Hotspots element with different settings: a product breakdown, a location map, a menu dish and a shop-the-look photo. Move your mouse over a pulsing spot to open it. On a phone, tap a spot and tap anywhere else to close it.
Fieldmark camera shop. Five spots with a plus icon, white spots with a violet pulse and a dark content box to the right.
Harbour & Hill Books. A transparent map image, small 18px spots with no icon and a white content box with opening times.
The Corner Table. Small green spots with a white pulse and the content box below each spot.
Kiln Street Ceramics. A tag icon in each spot, with the price in the title and a dark content box below.
Everything is set in the element, with no code.
Add Image Hotspots to your page and pick an image from the media library.
Add a hotspot for each point, then set its horizontal and vertical position as a percentage of the image.
Give each spot a title, some text, an optional icon and an optional link.
Spots stay in place because they are positioned by percentage, so they scale with the image.
Place each spot from 0 to 100 across and down, so it stays on the right point at any screen size.
Each spot has a pulsing ring to draw the eye. Set the spot and pulse colour and size.
On desktop the content box appears when a visitor hovers the spot.
On screens 768px wide or less, tapping a spot opens it and closes any other open spot.
Show the content box above, below, left or right of the spot.
Add an icon inside any spot and set its size and colour.
Add link text and a URL to send visitors to a product, page or article.
Spot content uses a rich text editor, so you can add formatting and line breaks.
Set title and content fonts, link typography with a hover colour, box background, borders and width.
Any image where parts of it need a short explanation.
Point out the parts of a product photo and link to more detail.
Mark offices, stores or venues on a map, as in the bookshop demo.
Tag items in a room or outfit photo and link each one to its product page.
Explain rooms and facilities on a property or venue plan.
Label parts of a technical drawing or process diagram.
Add notes to a photo of a place, building or exhibit.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Image | The image the hotspots sit on. | — |
| Add Hotspot | Repeater with one row per hotspot. | 1 spot |
| Spot Title | Title shown in the content box. | — |
| Spot Content | Rich text shown under the title. | — |
| Horizontal Position | Distance from the left edge, 0 to 100%. | 50 |
| Vertical Position | Distance from the top edge, 0 to 100%. | 50 |
| Icon | Optional icon inside the spot. | — |
| Link Text | Text for the link in the content box. | — |
| URL | Where the link goes. | — |
| Design | ||
| Image Width | Width of the image. | — |
| Spot Color | Colour of the spot. | — |
| Spot Size | Size of the spot. | 30px |
| Pulse Color | Colour of the pulsing ring. | — |
| Pulse Size | Size of the pulsing ring. | 40px |
| Title Font | Typography, effects and alignment for spot titles. | — |
| Content Font | Typography, effects and alignment for spot content. | — |
| Icon | ||
| Icon Size | Size of the icon inside a spot. | — |
| Icon Color | Colour of the icon. | — |
| Content Area | ||
| Position | Top, Bottom, Left or Right of the spot. | — |
| Background Color | Background of the content box. | — |
| Borders | Border and radius of the content box. | — |
| Width | Width of the content box. | — |
| Text Button | ||
| Typography | Link text style, with a hover colour. | — |
As many as you like. Each row in the Add Hotspot repeater is one spot.
They stay on the same point of the image, because their positions are percentages of the image size.
On screens 768px wide or less, a tap opens a spot's content and closes any other open spot. Tapping outside a spot closes it.
Yes. Fill in Link Text and URL for that spot and a link appears in its content box.
Yes. Pick an icon for the spot and set the icon size and colour in the Icon design section.
The position sets the top left corner of the spot area, which is about 55px square. Take a few percent off each value to centre the spot on the exact point.
Image Hotspots is included with Phox Elements, along with 140+ other premium elements for Breakdance.
