How to Add and Remove Mark on Image by using jQuery
- Article
- Comment (8)
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.
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.
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
You can add comments with the marks.
Download code?
This are all snippet codes,you can try this code.
Is that all the codes needed ? can you give the complete codes?
or maybe send the files to my email?
It’s long back I programmed. That’s the entries code. Let me try to prepare download source soon.
will this work in mobile device browser as well in a responsive manner?
hope it will work. But i didnt test it yet