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>
Rispondi quotando