posizionare immagine coordinate assolute

Salve:

Ho realizzato un banale script (JS) che mi da le coordinate di dove posizionare un immagine (in pixel).

Per mettere l'immagine, portei utilizzare il CSS:

Con questo codice:

Codice:

<style type="text/css">  </style>

Poteri fissare una immgine nelle coordinate che voglio (in questo caso, 2000,152).

ma come faccio a passargli una variabile JS?

(esempio)

Codice:

... <script language="Javascript"> ... ...//x,y -->variabili che contengono coordinate <style type="text/css">  </style> </script> <DIV ID="prova;"><img src="0.gif"></div> ...

..Naturalmente non funziona...

Come posso fare?
Come faccio a inglobare il CSS dentro il Javascript ??

Grazie,

CIAO !

Dovresti scrivere a parte il CSS, specificando solo le proprietà che rimangono "statiche" (nel tuo caso, position e z-index).

Poi via JavaScript imposterai le altre, usando questa sintassi:

Codice:

document.getElementById ('prova').style.top = ...; document.getElementById ('prova').style.left = ...;

inserendo ovviamente, al posto dei puntini, il valore opportuno.

Stammi bene...

Ho fatto così:

Codice HTML:

<html> <head> <title> prova </title> <style type="text/css">  </style> </head> <body> <script language="Javascript"> prova(); function prova() { y=document.body.scrollTop; totale=window.screen.height; y+=(totale/2); x=window.screen.width/2; document.getElementById ('prova').style.top = y; document.getElementById ('prova').style.left = x; alert("x:"+x+" y:"+y); setTimeout("prova()",1000); } </script> <DIV ID="prova;"><img src="0.gif"></div> </body> </html>

L'alert l'ho messo soltanto per capire se funziona:

-->Senza le due righe funziona (l'alert da i valori giusti!)
-->con le due righe non funiona (l'alert non viene nemmeno eseguito) :crycry:

Comunque credo che ci sia anche un errore nel css : ho provato a parte con dei valori statici di top e left, ma l'immagine non si spostava!!

Ci sono vari errori:
- in CSS non esiste la proprietà zindex, forse volevi scrivere z-index
- hai messo un punto-e-virgola di troppo sull'ID nel codice HTML

Inoltre, hai un motivo per eseguire ricorsivamente quel codice, senza possibilità di prevedere un caso di uscita?

Stammi bene...

Citazione:

Originalmente inviato da dementialsite

Ci sono vari errori:
- in CSS non esiste la proprietà zindex, forse volevi scrivere z-index
- hai messo un punto-e-virgola di troppo sull'ID nel codice HTML

...Hai ragione :lol: (il punto & virgola l'ho visto in una guida.... a quanto pare è sbagliata!!)

Citazione:

Originalmente inviato da dementialsite

Inoltre, hai un motivo per eseguire ricorsivamente quel codice, senza possibilità di prevedere un caso di uscita?
Stammi bene...

Eseguo ricorsivamente la funzione finché l'utente è sul mio sito!!

Adesso il CSS funziona: (mettendo le coordinate statche).

Ma purtroppo, le due righe di codice JS che mi hai dato non funzionano: senza, l'alert appare; con credo, che la funzione non venga nemmeno eseguita: non appare l'alert e non sposta l'immagine:crycry:

Grazie

EDIT:

Ti (ri)posto il codice:

Codice HTML:

</title> <style type="text/css">  </style> </head> <body> <script language="Javascript"> prova(); function prova() { y=document.body.scrollTop; totale=window.screen.height; y+=(totale/2); x=window.screen.width/2; alert("x:"+x+" y:"+y); document.getElementById ('prova').style.top = "y"; document.getElementById ('prova').style.left = "x"; setTimeout("prova()",1000); } </script> <DIV ID="prova"><img src="0.gif"></div> </body> </html>

Prova a cambiare questo:

Codice PHP:

document.getElementById ('prova').style.top = "y"; document.getElementById ('prova').style.left = "x";

con questo:

Codice PHP:

document.getElementById ('prova').style.margin-top = "y"; document.getElementById ('prova').style.margin-left = "x";

no, non funziona:crycry:

e poi credo che bisogna fare:

Codice HTML:

document.getElementById ('prova').style.top = x; document.getElementById ('prova').style.left = y;

e non:

Codice HTML:

document.getElementById ('prova').style.top = "x"; document.getElementById ('prova').style.left = "y";

(errore mio!)

Grazie comunque

ciao!

Prova così

Codice HTML:

<html> <head> <title> prova </title> <style type="text/css">  </style> <script language="Javascript"> function prova() { y=document.body.scrollTop; totale=window.screen.height; y+=(totale/2); x=window.screen.width/2; var dd = document.getElementById('prova'); dd.style.top = y; dd.style.left = x; } </script> </head> <body onload="prova()"> <div ID="prova"><img src="0.png"></div> </body> </html>

Grazie 1000 per la risposta...

In definitiva ho fatto così (ma non funziona):

Codice HTML:

<html> <head> <title> prova </title> <style type="text/css">  </style> <script language="Javascript"> function prova() { y=document.body.scrollTop; totale=window.screen.height; y+=(totale/2); x=window.screen.width/2; var dd = document.getElementById('prova'); dd.style.top = y; dd.style.left = x; alert("x: "+x+"y: "+y); setTimeOut("prova();",100); } </script> </head> <body onload="prova()"> <div ID="prova"><img src="0.gif"></div> </body> </html>

Da lo stesso problema: la esegue solo 1 volta la ricorsiva.
...Adesso non funziona nemmeno la x :-( -->non cambia valore se 'scrollo'...

p.s. l'alert l'ho aggiunto per vedere se faceva...

setTimeOut non esiste, la funzione corretta è setTimeout.
JS è case sensitive.

:shock:Ma quante ne sai ?????:shock:

FUNZIONAAA!!!:lol:

Grazie di tutto...

Non sapevo che JS fosse case sensitive (come il C,Java,C++...)...

Pensavo che fosse come l'HTML !!!

(fino adesso mi è andata sempre bene: ci ho sempre azzeccato [con la fortuna]:razz:...).

Ti (ri)ringrazio..

CIAO!!!