Ciao, sto cercando di realizzare una cosa stile le tag di facebook, però ho un problema con il posizionamento tramite javascript, questo è il codice 'prototipo', cliccando su un punto della foto questo punto viene salvato nel database, che poi viene a riletto e viene creata una mappa dei punti in cui mostrare il quadratino con relativo messaggio.
Il problema è che mi piazza i quadratini totalmente sballati da dove dovrebbero essere, o meglio la x è corretta, la y è troppo in basso...
Però ho provato a fare alert(pos_x+' '+pos_y), e ad esempio ho '300 60' che andrebbe benissimo, è la posizione dove dovrebbe essere, ma poi mi piazza il quadratino un bel po' più in basso...

Potreste darmi una mano?

Grazie e scusatemi se sono stato poco chiaro...

Codice PHP:
<html>
<head>
<?php $xajax->printJavascript("./moduli/xajax"); ?>
<script language="JavaScript">
    /* Salva il punto in cui si effettua il click */
    function add_tag(event){
        pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("div_img").offsetLeft;
        pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("div_img").offsetTop;
        /* Funzione xajax che salva il punto */
        xajax_saveclick(pos_x,pos_y,1,53);
    
    }
    /* Mostra il tag nella posizione x,y */
    function show_tag(x,y,text){
        /* Ricalcolo la posizione x */
        pos_x = parseInt(x)+document.getElementById("div_img").offsetLeft;
        /* Ricalcolo la posizione y */
        pos_y = parseInt(y)+document.getElementById("div_img").offsetTop;
        
        /* Mostro il quadratino */
        document.getElementById("quadrato").style.left = (pos_x-27);
        document.getElementById("quadrato").style.top = (pos_y+27);
        document.getElementById("quadrato").style.visibility = "visible" ;
        /* Mostro il testo */
        Tip(text,FIX, ['div_img', pos_x+27, pos_y+27]);
    }
    /* Nasconde il quadratino e il testo */
    function hide_tag(){
        document.getElementById("quadrato").style.visibility = "hidden" ;
        UnTip();
    }
</script>
</head>
<body>
    <script language='JavaScript' type='text/javascript' src='wz_tooltip.js'></script>
    
    <div id="div_img" style="width:500px; height:228px;>
    [img]img.jpg[/img]
    <map name="Map" id="Map">
        <?php
            /* Leggo dal db le tag per questa foto */
            $result = dbquery("SELECT t.tag_x, t.tag_y, t.user_id, u.username FROM foto_tags AS t ,phpbb_users AS u WHERE u.user_id = t.user_id AND t.foto_id = '1'");
            /* Se ce ne sono */
            if(dbrows($result)){
                /* Per ogni tag creo un quadrato */
                while($row = dbarray($result)){
                    echo "<area shape='rect' coords='".($row['tag_x']-27).",".($row['tag_y']+27).",".($row['tag_x']+27).",".($row['tag_y']-27)."' href='#' onmouseover=\"show_tag('".$row['tag_x']."','".$row['tag_y']."','".stripslashes($row['username'])."')\" onmouseout='hide_tag()' />";
                }
            }
        ?>
    </map>
    [img]rettangolo.png[/img]
    </div>
</body>
</html>