modifica delle coordinate di un immagine

**cuinie** · 29-10-2009, 20:55

Ciao a tutti,
sto cercando di fare uno script per fare in modo che quando clicco su un'immagine questa si sposta.
Però la mia funzione non fa quello che dovrebbe.
Ho usato il metodo top e left come segue:

codice:

 document.n.style.left=bianco_left;

Di seguito vi riporto il codice completo, potreste aiutarmi a capire cosa sbaglio.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Puzzle dell'otto</title>
<script language="javascript" type="text/javascript">
<!--
    var bianco_left=210;
    var bianco_top=210;

    function muovi(l,t,n)
    {
        var x;
        var y;
        l=parseInt(l); 
        t=parseInt(t);
        window.alert(t);
        //se sottraendo dalla posizione orizzontale 55
        //e sottraendo dalla posizione verticale 80
        //ottengo 0 allora significa che il click è stato fatto su una cella che è vicina allo spazio bianco
        //quindi posso scambiare il numero su cui ho cliccato con il bianco
        if((((l-bianco_left)==0)&&((bianco_top-t)==80))||(((bianco_left-l)==55)&&((bianco_top-t)==0))||(((l-bianco_left)==55)&&((t-bianco_top)==0))||(((t-bianco_top)==80)&&(((l-bianco_left)==0))))
        //nell'if CASO 1: bianco sotto - CASO 2: bianco a sx - CASO 3: bianco a dx - CASO 4: bianco sopra
        {
             x=l;
             y=t;
             window.alert("sposta!");
             document.n.style.left=bianco_left;
             document.n.style.top=bianco_top;
             window.alert(document.n.style.left);
             bianco_left=x;
             bianco_top=y;
        }
        else
        {
            window.alert("Non puoi spostare la casella selezionata");
        }
    }
    function start()
    {
        document.uno.style.left="300px";
        document.uno.style.top="300px";
    }

//-->
</script>
</head>

<body>
    


        [img]puzzle_ott/1.jpg[/img]
        [img]puzzle_ott/2.jpg[/img]
        [img]puzzle_ott/3.jpg[/img]
    </p>
    


        [img]puzzle_ott/4.jpg[/img]
        [img]puzzle_ott/5.jpg[/img]
        [img]puzzle_ott/6.jpg[/img]
    </p>
    


        [img]puzzle_ott/7.jpg[/img]
        [img]puzzle_ott/8.jpg[/img]
    </p>
    <input type="button" style="position:absolute; left:150px ;top:300px" name="begin" id="begin" value="Inizia" onclick="start()" />
</body>
</html>

**br1** · 30-10-2009, 19:42

Non puoi usare direttamente il nome di una variabile per identificare un oggetto nella pagina...

codice:

             window.alert("sposta!");
             document.all(n).style.left=''+bianco_left+'px';
             document.all(n).style.top=''+bianco_top+'px';
             window.alert(document.all(n).style.left);

Oppure usa l'id ed il metodo getElementById(n)

ciao

**cuinie** · 01-11-2009, 19:04

Ti ringrazio br1 della risposta.
Purtroppo non riesco comunque a farlo funzionare.
Ho provato sia con document.all con il codice che mi hai indicato, sia Document.getElementsById(n) modificando il codice come segue

codice:

var id=document.getElementsById(n);
l=parseInt(l); 
        t=parseInt(t);
        window.alert(t);
if((((l-bianco_left)==0)&&((bianco_top-t)==80))||(((bianco_left-l)==55)&&((bianco_top-t)==0))||(((l-bianco_left)==55)&&((t-bianco_top)==0))||(((t-bianco_top)==80)&&(((l-bianco_left)==0))))
{
             x=l;
             y=t;
window.alert("sposta!");
             document.id.style.left=''+bianco_left+'px';
             document.id.style.top=''+bianco_top+'px';
             window.alert(document.id.style.left);

ma in entrambi i modi se clicco su un'imagine che ha uno spazio vuoto nelle vicinanaze, l'immagine non viene spostata in quello spazio vuoto.
Ad esempio se clicco sull'immagine di nome sei che sotto ha uno spazio vuoto, questa dovrebbe spostarsi al posto di questo spazio, ma non succede.
Ho sbagliato qualcosa?

**br1** · 01-11-2009, 23:10

Certo che se ti inventi la sintassi...

codice:

var id=document.getElementsById(n);
...
...
//          document.id.style.left=''+bianco_left+'px'; // diventa:
             id.style.left=''+bianco_left+'px';

... e non sono sicuro che tutti i brower digeriscano "id" come nome di variabile... essendo una parola riservata, usa la fantasia (che so, pippo....)

ciao

**cuinie** · 02-11-2009, 15:44

scusami ma non sono alle prime armi con il javascript.

Comunque mentre aspettavo risposte ho già modificato il nome della variabile perchè pensandoci meglio mi sono resa conto che poteva creare problemi e ho già corretto l'errore di sintassi.
Ho notato che il metodo muovi funziona se indico direttamente l'id di un immagine, ma se voglio passare l'id come parametro alla funzione, non va.
Potrebbe essere che non sia compatibile con firefox (che sto usando per testare il codice)?

**cuinie** · 02-11-2009, 15:49

*volevo dire sono alle prime armi

Discussione: modifica delle coordinate di un immagine

Strumenti discussione

Ricerca discussione

Visualizza

modifica delle coordinate di un immagine

Re: modifica delle coordinate di un immagine

Permessi di invio