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

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online