jQuery areaSelectable

A basic extension for select an area on image or other elements.

Examples:

1. Basic Setup

Html: 
<img id="image" src="your_image.jpg">
Javascript: 
$("#image").areaSelectable();
Sample Image

2. Advanced Features

Allow multiple

Html: 
<img id="image" src="your_image.jpg">
Javascript: 
$("#image").areaSelectable({ allowMultiple: true });
Sample Image

Custom area counts

Html: 
<img id="image" src="your_image.jpg">
Javascript: 
$("#image").areaSelectable({ allowMultiple: true, x: 5, y: 5 });
Sample Image

Set areas

Html: 
<img id="image" src="your_image.jpg">
Javascript: 
$("#image").areaSelectable('setSelected', [1, 2, 9]);
Or: 
$("#image").areaSelectable('setSelected', "1, 2, 9");
Sample Image

3. Options

Aviable Options 

areaClass: "area", // class name for areas
color: "#cd0000", // area color
opacity: ".6", // Area opacity
splitOperator: ",",
x: "2",
y: "3",
width: "auto",
height: "auto",
createHidden: true, // Creates hidden input
name: "", // hidden inputs name
allowMultiple: false, // Allow multiple area select
// Callbacks
onAfterSelect: function(status, id) {},
onBeforeSelect: function(status, id) {},
onSelected: function(id) {},
onDeselected: function(id) {}

3. Methods

Set Selected Items 
$("#image").areaSelectable('setSelected', [1, 2, 9]);
Get Selected Items 
$("#image").areaSelectable('getSelected');