There is a popular saying that a picture is worth a thousand words. Images are a great way of catching our attention instantly. But sometimes its necessary to tag or link specific parts of images to provide information. Popular social media giants like Facebook and Google Plus use image tagging to identify the people and places in images.
In this tutorial I am going to show you how to create a simple image tagging system using jQuery and CSS. Lets get started.
Image Tagging Tutorial Demo and File Download
Creating the Initial Layout
In this step we are going to setup the initial layout with the image to be tagged. We need to use the jQuery UI library for dragging and dropping and resizing. Let’s take a look at our initial code.
<html>
<head>
<title>Image Tagging with jQuery and PHP</title>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
</head>
<body>
<div id='main_panel'>
<div style='margin: auto;
text-align: center;
width: 600px;'>
<div id='image_panel' >
<img src='tagging.jpg' id='imageMap' />
<div id='mapper' ><img src='save.png' onclick='openDialog()' /></div>
<div id="planetmap">
</div>
<div id='form_panel'>
<div class='row'>
<div class='label'>Title</div><div class='field'><input type='text' id='title' /></div>
</div>
<div class='row'>
<div class='label'></div>
<div class='field'>
<input type='button' value='Add Tag' onclick='addTag()' />
</div>
</div>
</div>
</div>
</div>
<div style="background: none repeat scroll 0 0 #C7C7C8;
border: 1px solid #AEAEAE;
clear: both;
margin: 20px auto;
padding: 20px 0;
text-align: center;
width: 600px;">
<input type="button" value="Show Tags" onclick="showTags()" />
<input type="button" value="Hide Tags" onclick="hideTags()" />
</div>
</div>
</html>
Now lets get an idea about how our layout is structured and important components for this tutorial.
- Initially we include the CSS and JavaScript files necessary for the demo. I have used the jQuery UI library.
- Then we have the #image_panel which has all the components related to tagging.
<div id='image_panel' >
<img src='tagging.jpg' id='imageMap' />
<div id='mapper' ><img src='save.png' onclick='openDialog()' /></div>
<div id="planetmap">
</div>
<div id='form_panel'>
<div class='row'>
<div class='label'>Title</div><div class='field'><input type='text' id='title' /></div>
</div>
<div class='row'>
<div class='label'></div>
<div class='field'>
<input type='button' value='Add Tag' onclick='addTag()' />
</div>
</div>
</div>
</div>
- First we have the image to be tagged with the ID imageMap
- Then we have an element called #mapper which will be hidden initially. It’s used to define the tagging area.
- #image_panel is positioned relative to the main_panel and #mapper is absolutely positioned. Also, the mapper should have a higher z-index value since it needs to be displayed on top of the image.
- Then we have a component called planetmap. It is used to keep the tagged sections. When a tag is created on the main image a small div will be created and appended to this planetmap section.
- Next you can see the #form_panel. It used to create title of tags. When a tag is created it will popup and request for tag name. Once created it will hide.
Now we have a basic idea about our layout. Styles used in the demo are not included in the above code. So make sure to use the project files while you read the tutorial to get a better understanding.
Generating Tag Window
We have to load the tag window when the user clicks somewhere on the image. If you haven’t checked it already, load the demo and click somewhere. Lets see how we can create the tag window using the following code. Look at the $(“#imageMap”).click in the project files and I’ll be explaining it step by step.
var image_left = $(this).offset().left;
var click_left = e.pageX;
var left_distance = click_left - image_left;
var image_top = $(this).offset().top;
var click_top = e.pageY;
var top_distance = click_top - image_top;
- Offset gets the coordinates of the image relative to the document. This is called inside the mouseclick event. So event.pageX will give you the absolute x coordinate of image.
- Then we get the actual distance to clicked position from the beginning of the image using click_left – image_left.
- We apply the same method to retrieve the top distance of clicked position.
var mapper_width = $('#mapper').width();
var imagemap_width = $('#imageMap').width();
var mapper_height = $('#mapper').height();
var imagemap_height = $('#imageMap').height();
Then we calculate the width and heights of mapper (window for tagging) and the actual image. Now we have all the required parameters to start loading the tag window. We can use the top_distance and left_distance to load the tag window. The problem is it should not go outside the image container, we have to do the following validations while loading tag window.
0 Comment to "Image Tagging Tutorial Using jQuery and CSS"
Post a Comment