ricavare le coordinate da un'immagine

**deejayp** · 07-07-2004, 18:20

ciao ragazzi..

vorrei sapere se è possibile fare questa determinata operazione:

Ho un form di modifica dati..
tra i vari campi vi è uno che indica le coordinate (espresso nel seguente modo esempio: 100/100 ) per far visualizzare su di una mappa (con una bandierina) il posizionamento di un Hotel.

Vorrei adesso poter modificare tali dati, ricavando tali coordinate direttamente dalla mappa ed inserirla automaticamente nel form.

In poche parole...vicino al campo interessato, inserire un link che mi apra una popup con all'interno la MAPPA in questione.

Dopodichè passandoci il mouse e cliccandoci sopra mi debba ricavare le coordinate ed inserirla nel form precedentemente indicato.

Fino alla popup ed alla visualizzazione della mappa all'interno..non vi sono problemi..

Adesso il problema è che non saprei come poter ricavare le coordinate..

Qualcuno di voi..ha idea di come si possa fare??!

**Xinod** · 07-07-2004, 23:26

fattibile, anche seguendo + di una via
x ora ti posto quella più semplice che sfrutta l' oggetto event

codice:

<script type="text/javascript">
function cliccato(e){
	if(!e) e=window.event
	var eX = (e.layerX) ? e.layerX : e.offsetX | 0
	var eY = (e.layerY) ? e.layerY : e.offsetY | 0
	alert('x='+eX+', y='+eY)
}
</script>
[img]img.jpg[/img]

l' ho provato con ie6, moz1.5, ffox0.8, op7.23, op6.11 su win2k

lo stile serve per mozilla/firefox che altrimenti rilevano dall' inizio del documento

l' altra impone calcoli particolari:
rilevi la posizione del click rispetto a tutto il documento (eventuali parti scrollate comprese)
e sottrai a x e y le coordinate assolute dell' elemento cliccato

ciao

**deejayp** · 08-07-2004, 19:59

ti ringrazio Xinod..funziona lla grande..l'ho modificato in quersto modo..

così mi inserisce nel form i dati che mi interessano e mi chiude la popup al momento del click..

purtroppo volevo abbianre al mouse (mentre si muoveva un0immagine (una X))..ma ho notato che se la scio lo Style l'immagine compare sotto la MAPPA..se invece tolgo lo STYLE..l'immagine si vede..ma non funziona + lo script...come posso fare per risolvere questo problema??

ti riporto il codice interno della pagina:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META name="GENERATOR" content="IBM NetObjects TopPage V4.0.3 (Evaluation)  for Windows">
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>CilentoNaturalTravel.com - Fissare su Mappa la Struttura</TITLE>
<LINK rel="stylesheet" href="../font.css" type="text/css">
<SCRIPT type="Text/Javascript">
<!--
var immagine='../img/cancella.gif'; 
var code = ''; 
if (document.all) { 
code += '<SPAN ID="pointer" STYLE="position: absolute; left: -100">'; 
code += '[img]' + immagine + '[/img]'; 
code += '</SPAN>'; 
} else { 
code += '<LAYER ID="pointer" POSITION="absolute" LEFT="-100">'; 
code += '[img]' + immagine + '[/img]'; 
code += '</LAYER>'; 
} 
document.write(code);

if(document.layers) document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = coordinate; 

function coordinate(e) { 
if (document.layers) { 
document.layers.pointer.left = e.pageX -4; 
document.layers.pointer.top = e.pageY -4; 
} 
if (document.all) { 
pointer.style.left = event.clientX + document.body.scrollLeft -4; 
pointer.style.top = event.clientY + document.body.scrollTop -4; 
} 
return true; 
} 

function cliccato(e){
	if(!e) e=window.event
	var eX = (e.layerX) ? e.layerX : e.offsetX | 0
	var eY = (e.layerY) ? e.layerY : e.offsetY | 0
	window.opener.document.forms["ModStruttura"].coordinate.value = (eX + 2) +'/'+ (eY - 35) ;
             window.close()
}
//-->
</SCRIPT> </HEAD>
<BODY text="#000000" link="#000000" vlink="#000000" alink="#000000">
<DIV align="left">
<TABLE border="1" cellpadding="2" cellspacing="1">
  <TBODY>
    <TR>
      <TD valign="top" align="center">
      <TABLE border="0" cellpadding="0" cellspacing="0" width="465" height="395">
        <TBODY>
          <TR>
            <TD align="left" valign="top">[img]../img/mappa_campania.jpg[/img]</TD>
          </TR>
        </TBODY>
      </TABLE>
      </TD>
    </TR>
  </TBODY>
</TABLE>
</DIV>
</BODY>
</HTML>

**Xinod** · 08-07-2004, 21:29

perchè non rendi il puntatore a croce con
<img ... style="position:relative;cursor:crosshair">

a parte questo, che capisco potrebbe non essere proprio una soluzione
(benchè, magari assegni con i css un puntatore completamente personalizzato che sostituisce la freccia...)
il resto dello script è ...antico

con un mozilla non può funzionare,
addirittura cercherebbe di scrivere tag <layer> visualizzabili solo con il vecchio NN4

cmq, se lo vuoi tenere puoi specificare uno z-index:100 nello stile del "pointer", ma come hai visto l' immagine non si riesce a cliccare perchè lo span viene in primo piano

a questo, qualunque soluzione tu voglia adottare (a parte appunto il cursore personalizzato di cui sopra), non c' è rimedio se non spostare a sufficienza l' immagine che segue il puntatore

ciao

**deejayp** · 09-07-2004, 09:17

Xinod..è perfetto..
non ci avevo pensato a modificare direttamente il cursore..

Funziona alla grande.

Adesso provero con Netscape 6..ma penso che non ci siano problemi..

**pierfrac** · 07-09-2004, 09:13

uffa a me seviva proprio con opera ma perché non va?

**pierfrac** · 07-09-2004, 09:15

non funziona l'immagine messa sotto il mouse!

Discussione: ricavare le coordinate da un'immagine

Strumenti discussione

Ricerca discussione

Visualizza

ricavare le coordinate da un'immagine

non funziona con opera!!

risolto!

Permessi di invio