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

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>  

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.

	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;">');

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.


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.


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

            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;">');

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.

		var id =; 
		var pos = id.indexOf("_");
		var x_pos = parseInt(id.substr(0, pos)); 
		var y_pos = parseInt(id.substr(pos+1));      
            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');     }

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


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, PHP and Data Analyst. Database Management Advance Level


  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?

  3. commenter

    Is that all the codes needed ? can you give the complete codes?
    or maybe send the files to my email?

  4. commenter

    will this work in mobile device browser as well in a responsive manner?

Comment Below

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


Current ye@r *



Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.


Category Posts