Stable
Element
TranslatePress Language Switch
A language switcher for TranslatePress, rendered on the server.
View demo →
← All modules
New
Element
Since v0.7.0
Image Hotspots
Markers on an image that open popovers or a linked list, and can be dragged in the builder.
Topics: Accessibility · Media
Highlights
Click or hover/focus popovers
List below, before or after the image
Number, icon or dot markers
Drag markers in the builder with undo
Works without JavaScript as a list
Accessibility
Markers are named buttons (disclosure pattern), Esc closes and returns focus, popovers stay on screen.
Privacy
Everything is rendered on the server, no third-party scripts.
Live demo
See it in action
Everything below is the real element, configured in Breakdance. Try it with your keyboard, zoom in, or open the page on your phone.
Variant 1
Numbered markers, popover on click
Each marker is a button with a name. Click or press Enter to open the popover, Escape closes it and returns the focus. Below 768 pixels the popovers become a list under the image.
Mechanical chronograph
42 mm case, hand-wound movement, leather strap. A gift from the first client project.
Leather bracelet
Braided, adjustable, made by a small workshop in Hamburg-Ottensen.
Fragrance bottle
Cedar and vetiver. Not required for writing accessible markup, but it helps.
Leather wallet
Slim bifold with room for four cards and a USB key with the license backups.
Wireless mouse
Silent clicks, so the neighbors at the co-working space stay friends.
Laptop
Where the Breakdance builder runs all day. Every hotspot on this image was placed by dragging it in the builder.
-
Mechanical chronograph
42 mm case, hand-wound movement, leather strap. A gift from the first client project.
-
Leather bracelet
Braided, adjustable, made by a small workshop in Hamburg-Ottensen.
-
Fragrance bottle
Cedar and vetiver. Not required for writing accessible markup, but it helps.
-
Leather wallet
Slim bifold with room for four cards and a USB key with the license backups.
-
Wireless mouse
Silent clicks, so the neighbors at the co-working space stay friends.
-
Laptop
Where the Breakdance builder runs all day. Every hotspot on this image was placed by dragging it in the builder.
Variant 2
Icon markers, popover on hover and focus
Hover with the mouse or tab through the markers. The popover stays inside the screen and closes when the focus moves on.
Mechanical chronograph
42 mm case, hand-wound movement, leather strap. A gift from the first client project.
Leather bracelet
Braided, adjustable, made by a small workshop in Hamburg-Ottensen.
Fragrance bottle
Cedar and vetiver. Not required for writing accessible markup, but it helps.
Leather wallet
Slim bifold with room for four cards and a USB key with the license backups.
Wireless mouse
Silent clicks, so the neighbors at the co-working space stay friends.
Laptop
Where the Breakdance builder runs all day. Every hotspot on this image was placed by dragging it in the builder.
-
Mechanical chronograph
42 mm case, hand-wound movement, leather strap. A gift from the first client project.
-
Leather bracelet
Braided, adjustable, made by a small workshop in Hamburg-Ottensen.
-
Fragrance bottle
Cedar and vetiver. Not required for writing accessible markup, but it helps.
-
Leather wallet
Slim bifold with room for four cards and a USB key with the license backups.
-
Wireless mouse
Silent clicks, so the neighbors at the co-working space stay friends.
-
Laptop
Where the Breakdance builder runs all day. Every hotspot on this image was placed by dragging it in the builder.
Variant 3
Dot markers with a list at the side
The contents are always visible next to the image. Hovering an entry highlights its marker and the other way round. On tablets the list moves below the image.
-
Mechanical chronograph
42 mm case, hand-wound movement, leather strap. A gift from the first client project.
-
Leather bracelet
Braided, adjustable, made by a small workshop in Hamburg-Ottensen.
-
Fragrance bottle
Cedar and vetiver. Not required for writing accessible markup, but it helps.
-
Leather wallet
Slim bifold with room for four cards and a USB key with the license backups.
-
Wireless mouse
Silent clicks, so the neighbors at the co-working space stay friends.
-
Laptop
Where the Breakdance builder runs all day. Every hotspot on this image was placed by dragging it in the builder.