Tagging photos

[treeleaf20]

All, does anyone have a good script or have a suggestions on how to tag photos after they've been uploaded to the site. Similar to how facebook does it? Any suggestions would be appreciated. Thanks in advance.

[johanafm]

Simple version.

table tag (id, tag)
Holds nothing but the actual tags. tag should be unique.

table photo(id, file, etc)

table phototag(photo_id, tag_id) - primary key on both fields

If you wish to link tags to other data, you'd need to keep either one table like
table linktag(photo_id, table, table_id) - primary key on all fields
where table might be 'person' and table_id the id of the person you want to use as a tag

or separate tables for each kind of relation:
table persontag(photo_id, person_id)
table othertag(photo_id, othertable_id)

[treeleaf20]

Thanks, that's a good start from the database perspective. What about the actually how to code it? Do they use some kind of coordinates to show where the square or whatever you are using shows up on the picture when you roll over it?

[johanafm]

Ah, I've never used facebook, so I didn't know about that feature. My guess is that they store x and y coordinates for upper left corner, and also width and height of the square.

I'd change the phototag table from above to
table phototag(photo_id, tag_id, x, y, width, height)

If you keep the x and y coordinates respective to the photos upper left corner and always sticks the image tags in a div (photodiv) using relative or absolute positioning, with no margin or padding, then you can show the square's outline by appending a new div (squarediv) inside the photodiv. Use absolute positioning for squarediv, set its width and height according to width and height from the db and give squarediv a 1pt border.

When people assign tags, you could use a similar approach as above. When user clicks photo
1. addEventListener/attachEvent for mouseup/onmouseup
2. addEventListener/attachEvent for mousemove/onmousemove
2. squarediv is appended to imagediv
3. mousemove changes width and height of squarediv
4. mouseup removes mousemove and mouseup events and also stores coordinates, width and height

Another approach, with less precision is to just divide each image into sufficiently small squares and let the user click as many squars is applicable. In this case you'd display the image in each square as if it was a tilemap.

It might also be possible to allow the user a single mouse click and then use image analysis to decide what area was tagged. But that is beyond my knowledge. I don't even know if Imagick has support for this kind of thing or not.

[treeleaf20]

Do you have any example of how to do what you suggested above? I don't need to let them drag the tagged area. If I can just have them do an onclick and find the x, y and then make it 100X100 bigger to create the square that should be fine. Greatly appreciate the help.

[johanafm]

function createSquare(event) {
	var x = parseInt(event.clientX);
	var y = parseInt(event.clientY);

var left = x - 50;
var top = y - 50;

var d = document;
var div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "1pt solid black";

event.target.parentNode.appendChild(div);

}

<div style="position: relative;">
	<img src="http://localhost/images/model/male/2_Model_Picture_2.jpg" width="1200" height="900" onclick="createSquare(event);"/>
</div>

[treeleaf20]

That's great and appreciate. A couple questions:

1) If I wanted to clear this everytime a new click happened how could I do that?
2) If I wanted to get a select form box to appear when I click, is it possible to do that as well?

Thanks again.

[johanafm]

function createSquare(event) {
	var x = parseInt(event.clientX);
	var y = parseInt(event.clientY);

var left = x - 50;
var top = y - 50;

var d = document;
var div = event.target.parentNode.lastChild;
alert(div.nodeType)
if (div.nodeType != 1)
	div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "1pt solid black";

event.target.parentNode.appendChild(div);

var sel = d.getElementById('yourSelectIdOrContainerForIt');
sel.style.display = 'inline; // or 'block' if you have a hidden div
}

You may want to use layerX/Y instead of clientX/Y, though I do not know if it works in all browsers. It would save you some trouble if the image doesn't appear at the top of the screen.
Also, you may want to add an event listener to the div as well, since it rests atop of the image and thereby blocks clicks within the div from reaching the image.

[treeleaf20]

Sorry, I'm not very good with this part at all. For the select do I need a new div or can I somehow incorporate it into the div with the image? I moved the event listener to the div and you can still click to the right of the image so I moved the onclick back to the image and that seems to work pretty well.

[treeleaf20]

I tried this code:

<script>
function createSquare(event) {
	var x = parseInt(event.layerX);
	var y = parseInt(event.layerY);

var left = x - 50;
var top = y - 50;

var d = document;
var div = event.target.parentNode.lastChild;
//alert(div.nodeType)
if (div.nodeType != 1)
	div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "10pt solid black";

var sel = d.getElementById('tagged_person');
sel.style.display = 'inline' //or block if you have a hidden div
var tagged_user = d.tag.tagged_person;
tagged_user = tagged_user.value;
alert(tagged_user);

event.target.parentNode.appendChild(div);

}
</script>

<div style="position: relative;">
	<img src="yankess_rascal.jpg" onclick="createSquare(event);"/>
	<form action="" name="tag" method="post">
	<select name="tagged_person" id="tagged_person">
	<option value="Ryan">Ryan</option>
	</select>
	</form>
</div>

This shows up at the bottom of the image. Anyway to make it show up next to the block?

[johanafm]

treeleaf20;10932179 wrote:

I moved the event listener to the div and you can still click to the right of the image so I moved the onclick back to the image and that seems to work pretty well.

To avoid confusion, I'm going to call the two divs "container" (the one containing the image) and "square" (the one we put on top of the image).
What I meant was that if the user tries to click anywhere inside the square, the image will not be notified of an onclick event, since that happens in the square which does not recognize onclick events. So, if you need users to be able to click inside the square for subsequent tagging, then
the square will need an onclick event as well
or the user will need an option to remove the square
* or you will need to automatically remove the square when the user selects whom to tag

If you mean that you want the select box to appear next to the square, then create the select box in a similar fashion as the square: .createElement('select').
Then set position to absolute, and assign top value to whatever the square gets, but
left value to what the square gets + 120.

Also, if you add both a div and a select box to the container, then you will have to modify the code that removed the square (and add handling for the select). The simplest way would probably be to set div.id = 'tagSquare' and select.id = 'tagSelect'. Then user document.getElementById('tagSquare') instead of event.target.parent.lastChild. Check if (div != null) and go from there.

[treeleaf20]

Ok, I did this:

	var leftbox = x - 120;
	alert(x);
	alert(leftbox);
	divselect = d.createElement('select');
	divselect.style.position = "absolute";
	divselect.style.top = top + "px";
	divselect.style.left = leftbox + "px";

Nothing shows up. How can I actually put elements into the select box?

[johanafm]

Well, either you have an existing select box in your HTML code and move that around (get a reference to it with document.getElementById), or you'd need to popuplate it with options

var select = d.createElement('select');

var opt = d.createElement('option');
opt.value = 1;
opt.text = 'one';
select.appendChild(opt);

opt = d.createElement('option');
opt.value = 2;
opt.text = 'two';
opt.selected = true;
select.appendChild(opt);

[treeleaf20]

I do already have a select:

	<form action="" name="tag" method="post">
	<input type="hidden" name="picture_id" value="4">
	<select name="tagged_person" id="tagged_person">
	<?php
	$qryfav = "Select * from favorites where user_name='creep'";
	$resultfav = mysql_query($qryfav);
	while($resultsetfav = mysql_fetch_array($resultfav)){
	echo "<option value=\"$resultsetfav[favorite_user]\">$resultsetfav[favorite_user]</option>";
	}
	?>
	</select>
	</form>

How can I call that with the getElementById and put it in the newly created select? I'm guessing I want to put this in a div as well and make this hidden so it doesn't appear on the page as well?

I tried this but it didn't work:

	
var leftbox = x - 120;
	alert(x);
	alert(leftbox);
	divselect = d.createElement('select');
	divselect.style.position = "absolute";
	divselect.style.top = top + "px";
	divselect.style.left = leftbox + "px";

var sel = d.getElementById('tagged_person');
sel.style.display = 'inline' //or block if you have a hidden div
var tagged_user = d.tag.tagged_person;
tagged_user = tagged_user.value;
var picture_id = d.tag.picture_id;
picture_id = picture_id.value;
select.appendChild(sel);

event.target.parentNode.appendChild(div);
event.target.parentNode.appendChild(sel);

Actually, one other question. How can I add a submit button to the form that is being displayed. When the button is clicked then submit the form?

[treeleaf20]

So here is the code. It actually displays a select but nothing in the select. I'm not sure what you meant with the div != null to get rid of the select box with the square. Anyway to put the submit button in this as well? Sorry. Thanks for the continued help:

function createSquare(event) {
	var x = parseInt(event.clientX);
	var y = parseInt(event.clientY);

var left = x - 50;
var top = y - 50;

var d = document;
var div = event.target.parentNode.lastChild;
//alert(div.nodeType)
if (div.nodeType != 1)
	div = d.createElement('div');
div.style.width = "100px";
div.style.height = "100px";
div.style.position = "absolute";
div.style.left = left + "px";
div.style.top = top + "px";
div.style.zIndex = 5;
div.style.border = "10pt solid black";

var leftbox = x - 80;
alert(x);
alert(leftbox);
divselect = d.createElement('select');
divselect.style.position = "absolute";
divselect.style.top = top + "px";
divselect.style.left = leftbox + "px";

var sel = d.getElementById('tagged_person');
sel.style.display = 'block' //or block if you have a hidden div
var tagged_user = d.tag.tagged_person;
tagged_user = tagged_user.value;
var picture_id = d.tag.picture_id;
picture_id = picture_id.value;
divselect.appendChild(sel);

event.target.parentNode.appendChild(div);
event.target.parentNode.appendChild(divselect);
}

[johanafm]

Read the Gecko DOM Reference found here along with the Core Javascript Reference. They should provide all you need to make things work.

One possible structure

<div id="container" style="position: relative;">
	<img onclick="" />
	<select id="people" style="display: none; position: absolute" onchange="setPerson(this);"/>
	<div id="square" style="display: none; position: absolute;"/>
</div>
<form>
	<input type="hidden" id="left" name="left"/>
	<input type="hidden" id="top" name="left"/>
	<input type="hidden" id="img" name="left"/>
	<input type="hidden" id="person" name="left"/>

<!-- this probably should be hidden til x,y position and person have been selected -->
<input type="submit" ... />
</form>

In your code you were referring to two different select boxes, one created and one preexisting through HTML code, as well as one undefined variable having a name that suggests it was supposed to be a (third?) select box. Keeping your variables and what they refer to straight is of great importance.

function {
	var d = document;
	var sq = d.getElementById('square');
	var sel = d.getElementById('people');

// position sq
// position sel

// both could be inline or block. since they're absolutely positioned it matters little
sq.style.display = 'block';
sel.style.display = 'inline';

d.getElementById('left').value = NNN; // where NNN is the x coord of the mouse click
// etc
}

function setPerson(o) {
	d.getElementById('person').value = o.value;
}