JS ricavare le coordinate X e Y di un oggetto

[ivy_76]

Ciao

Ho una griglia di immagini fatta da 4 righe e 4 colonne. Quando clicco su un'immagine faccio apparire un messaggio sullo schermo. Il messaggio non fatto con un ALERT ma è un div che da nascosto diventa visibile. Nei CSS ho definito la posizione left e top in modo che compaia sempre nello stesso punto. Cosi però non mi piace più e vorrei che comparisse vicino all'immagine che ho cliccato. Per fare questo credo che dovrei recuperare le coordinate X e Y di quella specifica immagine e passarla al mio div. Ma come si recuperano tali informazioni ?

[Razorblade]

Ciao,
racchiudi la tua immagine o il div che la contiene all'interno di una variabile tramite getElementById, ad esempio

var test = document.getElementById('test'); 

Per conoscere le coordinate di questo elemento devi usare offsetLeft e offsetTop es.

var x = test.offsetLeft;
var y = test.offsetTop; 

ovviamente x e y si riferiscono all'angolo superiore sinistro.

[ivy_76]

Rieccomi

ok ! Coordinate recuperate. Ora vorrei che il DIV nascosto abbia tali coordinate.Ho provato a fare l'operazione inversa ma on funziona.


var x = test.offsetLeft;
var y = test.offsetTop;

document.frmRic.div_nascosto.offsetLeft = x ;
document.frmRic.div_nascosto.offsetTop = y ;


Il codice del DIV in questione è questo

<div id='blocco_risultato_ricerca' name='div_nascosto'>


<div id='blocco_messaggi'>
<center>
<input type='text' name='left'>
<input type='text' name='top'>

<input type='hidden' name='txtDest'>
<input type='button' onClick='nascondiLivello()' name='pulsChiudi' value='". $lang[$lingua][chiudi] ."'>
<input type='button' onClick=\"nascondi_Rispondi('$lingua')\"name='puls Rispondi' value='". $lang[$lingua][rispondi] ."'>
</center>



<input type='text' style='width:250px; border: 0px; font-family:verdana, tahoma; font-size:11px;' name='titoloMess' value=''>


<textarea name='txtMess' cols='60' rows ='20' style='border: 0px; font-family:verdana, tahoma; font-size:11px;line-height:150%'></textarea>
</div>

[Razorblade]

Hai racchiuso il div nascosto in una variabile ( con getElementById )?
Non devi usare questo metodo:

document.frmRic.div_nascosto.offsetLeft = x ;
document.frmRic.div_nascosto.offsetTop = y ; 

che tra l'altro è concettualmente sbagliato in quanto un div non è un input.
Questo è quello che dovresti fare:

var nascosto = document.getElementById('div_nascosto');
nascosto.style.position = 'absolute';
nascosto.style.left = x+'px';
nascosto.style.top = y+'px'; 

Ovviamente devi includere queste righe di codice all'interno di una funzione scatenata dall'evento onclick.
Ciao

[ivy_76]

Perdonami ma nn capisco cosa voglia dire : "Hai racchiuso il div nascosto in una variabile ( con getElementById " ?

Ho scritto il tuo codice (nella funzione richiamata tramite onClick) e noto questo questo errore alla riga nascosto.style.position = 'absolute';

Errore : Necessario oggetto

[Razorblade]

Mi sono dimenticato di specificare che lo script devi inserirlo in fondo alla tua pagina, altrimenti javascript non sarà in grado di vedere il div nascosto ( in quanto ancora non esiste ).
Quindi per esempio:

<div id="div_nascosto"></div>

<script>
var nascosto = document.getElementById('div_nascosto');
nascosto.style.position = 'absolute';
nascosto.style.left = x+'px';
nascosto.style.top = y+'px';
</script> 

Però se hai inserito questa funzione all'interno di un evento onclick non ci dovrebbero essere problemi ad inserire il codice javascript in cima alla pagina in quanto se è presente onclick sicuramente è stato caricato il resto della pagina.

Se non riesci a farlo funzionare prova a postare il risultato che ti da l'alert dell'oggetto div. Mi spiego meglio:

var nascosto = document.getElementById('div_nascosto');
alert(nascosto); 

E magari riposta tutto il codice.
Ciao

[ivy_76]

Ok ! Ora funziona. Ho cambiato il div al quale mi volevo riferire. Anziché 'div_nascosto' mi sono collegato a "blocco_messaggi" (che avevo allegato in precedenza). Il div che usavo in precedenza mi dava un errore anche perché lo usavo da un' altra parte.


Grazie per il tuo aiuto