Image Tagging Using jQuery and CSS

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 Rakhitha Nimesh is going to show you how to create a simple image tagging system using jQuery and CSS.

Creating the Initial Layout - in this step Rakhitha Nimesh is going to setup the initial layout with the image to be tagged. He needs to use the jQuery UI library for dragging and dropping and resizing. Now lets get an idea about how his layout is structured and important components for this tutorial. Initially he includes the CSS and JavaScript files necessary for the demo. he has used the jQuery UI library. Then he has the #image_panel which has all the components related to tagging. First Rakhitha Nimesh has the image to be tagged with the ID imageMap. Then he has an element called #mapper which will be hidden initially. It’s used to define the tagging area.