Directory

← Back

Imagemap

An image map component for Vaadin 10+

Author

Rating

Popularity

<100

Show an image with separately clickable rectangular areas. Each area can have its own border and (semi-transparent) background with separate settings for the default state and hovered.

Sample code

ImageMap imageMap = new ImageMap("https://vaadin.com/images/trademark/PNG/VaadinLogomark_RGB_1000x1000.png", "Vaadin logo");

imageMap.addArea(99, 115, 400, 316).addClickListener(event -> Notification.show("Left antler"));
imageMap.addArea(499, 115, 400, 316).addClickListener(event -> Notification.show("Right antler"));
imageMap.addArea(280, 468, 433, 417).addClickListener(event -> Notification.show("Nose"));

Compatibility

1.0.01.1.0
(24.3)
(24.2)
(24.1)
10-24YY
(8.21)
(8.20)
(8.19)
(8.18)
(8.17)
(8.16)
(8.15)
(8.14)
(8.13)
(8.12)
(8.11)
(8.10)
(8.9)
(8.8)
(8.7)
(8.6)
(8.5)
(8.4)
(8.3)
(8.2)
(8.1)
(8.0)
(7.7)
(7.6)
(7.5)
(7.4)
(7.3)
(7.2)
(7.1)
(7.0)
(6.8)
(6.7)
(6.6)
(6.5)
(6.4)
(6.3)
(6.2)
(6.1)
(6.0)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Add support for click listeners outside any area

Released
2020-02-17
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 10+
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

Imagemap - Vaadin Add-on Directory

An image map component for Vaadin 10+ Imagemap - Vaadin Add-on Directory
Show an image with separately clickable rectangular areas. Each area can have its own border and (semi-transparent) background with separate settings for the default state and hovered.
Online