Weblog of Neill Horsman

A few months back I worked on a project that required photo tagging. The project got scraped but I am still developing most of the functionality for future work.

The requirement for this particular project was for a photo gallery grouped into albums, with photos consisting mainly of people out on the town. I wont go into full details but here is how you tag a static image.

View the demo here
Grab the source code here

We will start with creating a table to store all the image information in
[code lang="sql"]
CREATE TABLE phototags (
id int(255) NOT NULL AUTO_INCREMENT,
photoid int(11) NOT NULL,
title varchar(255) NOT NULL,
x1 int(11) DEFAULT NULL,
y1 int(11) DEFAULT NULL,
x2 int(11) DEFAULT NULL,
y2 int(11) DEFAULT NULL,
width int(11) DEFAULT NULL,
height int(11) DEFAULT NULL,
PRIMARY KEY (id)
);
[/code]
*photoid can be used later to implement into a photo gallery

1. First include the required .js
[code lang="html4strict"]



[/code]

2. add an image to your document.
[code lang="html4strict"]

[/code]
*note we need to give it an ID which will correspond with out jQuery selector.

3. Now the jQuery
[code lang="javascript"]
//Create some vars to hold the x/y info when selecting areas of the image
var $x1, $y1, $x2, $y2, $w, $h;
function selectChange(img, selection) {
$x1.text(selection.x1);
$y1.text(selection.y1);
$x2.text(selection.x2);
$y2.text(selection.y2);
$w.text(selection.width);
$h.text(selection.height);
//load the x/y/width/height into hidden text boxes
$('input#x1').val(selection.x1);
$('input#y1').val(selection.y1);
$('input#x2').val(selection.x2);
$('input#y2').val(selection.y2);
$('input#w').val(selection.width);
$('input#h').val(selection.height);
}

$(document).ready(function () {
$x1 = $('#x1');
$y1 = $('#y1');
$x2 = $('#x2');
$y2 = $('#y2');
$w = $('#w');
$h = $('#h');
});

//here is where we tell jQuery what image the area select will appear on.
$(window).load(function () {
$('img#imageid').imgAreaSelect({ selectionOpacity: 0, onSelectChange: selectChange,
outerOpacity: 0.4, handles: true });
$('.imgareaselect-handle').css('opacity', 0.7);
});
[/code]

In the above code, we inclued jQuery files, made an image with an ID, told jQuery to use that image for the image area select, and set up some other bits to later store this information in a database.

4. Now we need to store the x/y/width/height into some hidden text boxes, lets create a form
[code lang="php"]

[/code]

5. Then we can connect to out mysql database and insert all this information
[code lang="php"]
// mysql('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
$db = new mysqli('localhost', 'user' ,'pass', 'db_name');
// If user has submitted a tag, insert into database
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} else {
if(isset($_REQUEST['form'])) {
$query = $db->query(" INSERT INTO phototags (id, title, x1, y1, x2, y2, width, height) " .
" VALUES('', '".$_POST['title']."', '".$_POST['x1']."', '".$_POST['y1']."', '".$_POST['x2']."', '".$_POST['y2']."', '".$_POST['w']."', '".$_POST['h']."') ");
}
}
?>
[/code]

6. Now we need to get the coordinates from the database to make up our imagemap using an ul.
[code lang="php"]
if(!$db) {
// Show error if we cannot connect.
echo 'ERROR: Could not connect to the database.';
} else {
//database select
$query = $db->query(" SELECT id, title, x1, y1, x2, y2, width, height FROM phototags ");
while ($result = $query ->fetch_object()) {
//take the title for the tag and replace all spaces with a - to name the css class
$name = str_replace(' ', '-', $result->title);
?>

• title; ?>

}
}
?>
[/code]

7. Now for some CSS to show the title for the tag
[code lang="css"]
#map { margin:0; padding:0; width:400px; font-family:arial, helvetica, sans-serif; font-size:8pt; }
#map li { margin:0; padding:0; list-style:none; }
#map li a { position:absolute; display:block; background:url(images/blank.gif); text-decoration:none; }
#map li a span { display:none; text-decoration:none; }
#map li a:hover span { position:relative; display:block; left:10px; top:120px; padding:5px; border:1px solid #000; background:#fff; text-decoration:none; color:#000; filter:alpha(opacity=80); opacity:0.8; }
[/code]

View the demo here
Grab the source code here

This is my first tutorial so if its a bit hard to follow I am sorry, have a look at the source, its rather straight forward.

Feel free to use this for any personal/commercial project, modify or redistribute.
Send me an email if you find a use for it, or a better way to do everything.