jQuery plugin to draw HTML Image map areas on a canvas and manage selection
Pictarea depends on jQuery. To use it, include this in your page :
<script src="jquery.js" type="text/javascript"></script>
<script src="pictarea.js" type="text/javascript"></script>
For this following HTML:
<img id="map" src="{{ url }}" usemap="#map-mask"/>
<map name="map-mask">
<area shape="rect" coords="10,10,20,20" alt="description 1" target="1" />
<area shape="rect" coords="30,30,40,40" alt="description 2" target="2" />
</map>You can call the plugin like this:
$(function() {
$('#map').pictarea({
rescaleOnResize: true
});
});The receiver must be an img element with its usemap attribute defined.
To create image maps, we suggest you to use the ImageMap Gimp plugin.
Object of properties which will be apply to the canvas context of the area.
Default: { fillStyle: 'rgba(255,255,255,.4)', strokeStyle: 'rgba(255,255,255,.8)', lineWidth: 1 }
Object of properties which will be apply to the canvas context of the area when hovered.
Default: { fillStyle: 'rgba(255,255,255,.6)', strokeStyle: '#fff', lineWidth: 2, shadowColor: '#fff', shadowBlur: 10 }
Object of properties which will be apply to the canvas context of the area when selected.
Default: { fillStyle: 'rgba(255,255,255,.8)', strokeStyle: '#f00', lineWidth: 2 }
Object of properties which will be apply to the canvas context of the area when disabled.
Default: { fillStyle: 'rgba(0,0,0,.4)', strokeStyle: 'transparent' }
Attribe of the area elements which will be used to fill the value property.
Default: target
Attribe of the area elements which will be used to determine if it is disabled.
Default: disabled
Maximum number of selections allowed.
Default: 1
A boolean indicating if the canvas should be redraw when the window is resized.
The window size is checked using requestAnimationFrame for good performance.
Default: false
This event fires whenever mouseover is trigger on an area.
$img.on('enterArea.pictarea', function(evt) {
// ex: show a tooltip
var $area = $(evt.area),
offset = $img.offset(),
top = evt.originalEvent.pageY - offset.top,
left = evt.originalEvent.pageX - offset.left;
$caption.text($area.attr('alt')).css({ top: top, left: left }).show();
})
This event fires whenever mouseout is trigger on an area.
$img.on('leaveArea.pictarea', function(evt) {
// ex: hide the tooltip
$caption.hide();
})
This event fires whenever an area is clicked or touched.
$img.on('selectArea.pictarea', function(evt) {
// ex: prevent the selection
evt.preventDefault();
})
This event fires whenever the value has changed.
$img.on('change.pictarea', function(evt) {
var selection = evt.selection,
value = evt.value;
// ex: display the value in the console
console.log(value);
})
Original Size: 3.19KB gzipped (11.68KB uncompressed)
Compiled Size: 1.95KB gzipped (4.75KB uncompressed)
Nicolas Badia
Copyright 2016-2019 GestiXi under The MIT License (MIT).