How to Add and Remove Mark on Image by using jQuery - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

How to Add and Remove Mark on Image by using jQuery


During my one of a jQuery project I was happened to create a mark on  a image and remove that mark too. So I was started surfing on net to find a suitable plugin or scratch to workout.  But i cant find a suitable one, So I made one for my custom project use. Add and remove a mark on image using jquery, with out any plugin.

Image Marking

Image Marking

Creating a map mark in a image requires to create a div with background of our background image.  Here is the code for HTML image.

<div id="container">  
     <div id="kv_load" style="display:none" > </div>   
    <div style="background:url('images/markondiagram.PNG') no-repeat ; width:700px; height:759;border:2px solid #999;"  id="kv_mark">   </div>  
</div>

Here we just add the image to background image on a Div. Now we are going to write jquery code for mark a point on double click.

  $("#kv_mark").dblclick(function(e){		
	var  x = (e.pageX - this.offsetLeft)-17;
	var y = (e.pageY - this.offsetTop)-17;	  

	 $("#kv_mark").append('<img class="mark" src="images/mark.png" id="'+x+'_'+y+'" style="position:absolute;left:'+x+'px; top:'+y+'px; z-index:2;">');
		i++;	
   });

the above code create another div which will append on”  kv_mark ” div in a particular top left position based on our x and y coordinate.  Now we are going to remove the particular mark which we click on the  mark.

$('#kv_mark').on("click",".mark",function(e){     
		 $(this).remove();		
});

This will remove the particular mark which we clicked . Thats it,  If you want to store and retrieve the mark coordinates, than use ajax call to save the coordinates, like the following function.

  $("#kv_mark").dblclick(function(e){

	 x[i] = (e.pageX - this.offsetLeft)-17;
	 y[i] = (e.pageY - this.offsetTop)-17;		 

	 $.ajax({
            method: "POST",
            url: "kv_save.php", /* online, change this to your real url */
            data: { u_id: uesr_id, x_var:x[i], y_var :y[i], doc_id: 'kv_mark'},
            success: function( responseObject ) { },
            failure: function() {                alert('fail');            }
        });
	 $("#kv_mark").append('<img class="mark" src="images/mark.png" id="'+x[i]+'_'+y[i]+'" style="position:absolute;left:'+x[i]+'px; top:'+y[i]+'px; z-index:2;">');
		i++;	
   });

At the same time you can remove the particular  mark by passing the  x and y coordinates in the id of the mark.  so we can query it from db and delete it as well.

  $('#kv_mark').on("click",".mark",function(e){         
		var id = this.id; 
		var pos = id.indexOf("_");
		var x_pos = parseInt(id.substr(0, pos)); 
		var y_pos = parseInt(id.substr(pos+1));      
	 $.ajax({
            method: "POST",   url: "kv_delete.php",
            data: { u_id: uesr_id, x_var:x_pos, y_var :y_pos},
            success: function( responseObject ) {                 
            },
            failure: function() {       alert('fail');     }
        });
		 $(this).remove();		
});

That’s it. Now you can save and retrieve the mark coordinates.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

4 comments

  1. commenter

    Thank You for super code. I want another help. i need to add comments at the spot marked in the image in a popup window. Can you please help me to fix the requirement

  2. commenter

    Download code?

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts