Sistema de Tag em fotos

[sEnte]

Estou aqui a tentar criar uma especie de sistema de identificação nas fotos, mas o que acontece é que isto marca mas não nas coordenadas que deveria. Marca tudo no canto superior esquerdo

$(document).ready(function() {
$('#image').click(function(e) {
 var left = e.clientX;
 var top = e.clientY;
 $('#name').css('top', top-10).css('left', left-20);
 $('#name').show().focus();
});
$('#name').keyup(function(e) {
 if (e.keyCode == 13) {
  var name = $(this).val();
  var top = $(this).position().top;
  var left = $(this).position().left;
  $.post('init/tag.php', {name: name, top: top, left: left}, function() {
location.reload();
  });
 }
});
});

parte do insert

$name = $_POST['name'];
$top = $_POST['top'];
$left = $_POST['left'];
mysqli_query($connect, "INSERT INTO tag VALUES('', '{$name}', '{$top}', '{$left}')");

index

<?php
include 'init/connect.php';
$query = mysqli_query($connect, "SELECT * FROM tag");
while ($run = mysqli_fetch_array($query)) {
$name = $run['name'];
$top = $run['top'];
$left = $run['left'];
?>
<div id='tagged' style='top: <?php echo $top; ?>; left: <?php echo $left; ?>'><?php echo $name; ?></div>
<?php

}
?>

<img src='img/image.jpg' id='image'>
<input type='text' id='name'>

A tag era suposto ficar nesse ponto preto e não onde está

http://i.imgur.com/luJDm4o.png

Edited September 19, 2014 by sEnte

[alexviseu]

Verifica se o $top/$left não são zero na base de dados e/ou nos divs que estás a fazer output.

Se não forem zero, experimenta adicionar "px" tanto ao top como ao left.

Edit: Se fores fazer output de vários divs, não lhes dês um id. Dá-lhes antes uma classe. Os ids devem de ser únicos.

Edited September 20, 2014 by alexviseu

[sEnte]

Está tudo a inserir como deve ser na BD, o que realmente estava a falhar era o 'px' no div onde estava a mostrar. Agora está resolvido 😄

obrigado