CN1ImageMap

An image map component for Codename One

This library includes a component for displaying images with clickable hot zones, with the effect being similar to HTML image maps. The component can be resized, and the image and clickable areas are resized and positioned accordingly.

License

Apache 2.0

Installation

Install through Codename One settings.

If you haven’t activated any cn1libs before in your Codename One projects, see this tutorial which explains the process.

Usage

private ImageMapContainer createImageMap(NavigateWindowTemplate tpl) {

	ImageMapContainer out = new ImageMapContainer(tpl.img, tpl.img.getWidth(), tpl.img.getHeight());
	for (NavigateWindowLink link : tpl.links) {
		ImageMapContainer.ClickableAreaType type = ImageMapContainer.ClickableAreaType.Rect;
		if ("oval".equals(link.shape)) {
			type = ImageMapContainer.ClickableAreaType.Oval;
		}
		ImageMapContainer.ClickableArea area = out.new ClickableArea(type, link.bounds, evt->{
			NavigationEvent nav = new NavigationEvent(link.href);
			dispatchEvent(nav);
		});
		out.addClickableAreas(area);

	}
	return out;
}

Credits

1. Created by Steve Hannah

Building from Source

git clone https://github.com/shannah/CN1ImageMap
cd CN1ImageMap
./antw jar