This time I will share jQuery Plugin and tutorial about Custom Image Marker Plugin For jQuery – imagePointer.js, hope it will help you in programming stack.
imagePointer.js is a jQuery plugin which allows to use arbitrary elements as markers in your images. Supports multiple markers in an image.
How to use it:
1. By default, the plugin uses Font Awesome icons as image marks.
1 |
<link rel="stylesheet" href="font-awesome.min.css"> |
2. Insert your image as a background into a container.
1 |
<div class="mainContainer"></div> |
2 |
background-image: url("1.png"); |
3. Include jQuery library and the jQuery imagePointer.js plugin when needed.
1 |
<script src="/path/to/jquery.min.js"></script> |
2 |
<script src="/path/to/jquery.imagePointer.js"></script> |
4. Call the function on the container you created.
1 |
$(".mainContainer").imagePointer(); |
5. Style the image marker.
08 |
.CCImgPointer { color : royalblue; } |
11 |
background-color: #ccc; |
12 |
border: 1px solid black; |
6. Config the image marker.
01 |
$(".mainContainer").imagePointer({ |
02 |
"cursor" : 'crosshair', |
05 |
"pointerClass" : 'CCImgPointer', |
06 |
"mouseOverHTML" : '<div class="fa fa-map-marker fa-3x pointerElm"></div>', |
07 |
"mouseOverClass" : 'CCMouseOver', |
08 |
"removeClass" : 'CCRemovePointer', |
09 |
"strictBorder" : false, |
11 |
"destroyMouseOut" : true, |
12 |
"areaSelection" : true, |
13 |
"pointerArray" : [{'top' : 100, 'left' : 200}], |
7. Convert and output the image marker information to a JSON string.
1 |
$(".mainContainer").imagePointer({ |
2 |
pointerCallBack : function(pointerInfo){ |
3 |
$('#outputElm').html(JSON.stringify(pointerInfo)); |
This awesome jQuery plugin is developed by venuvijayan. For more Advanced Usages, please check the demo page or visit the official website.
