Imagemap
An image map component for Vaadin 10+
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"));
Links
Compatibility
| 1.0.0 | 1.1.0 | |
|---|---|---|
| (24.4) | ||
| (24.3) | ||
| (24.2) | ||
| (24.1) | ||
| 10-24 | Y | Y |
| -23 | Y | Y |
| -22 | Y | Y |
| -21 | Y | Y |
| -20 | Y | Y |
| -19 | Y | Y |
| -18 | Y | Y |
| -17 | Y | Y |
| -16 | Y | Y |
| -15 | Y | Y |
| -14 | Y | Y |
| -13 | Y | Y |
| -12 | Y | Y |
| -11 | Y | Y |
| -10 | Y | Y |
| (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
Initial version
- Released
- 2019-12-10
- 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+
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.
View on GitHubImagemap version 1.0.0
Initial version
Imagemap version 1.1.0
Add support for click listeners outside any area