posizionare immagine coordinate assolute

**alemoppo** · 29-12-2008, 23.19.25

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">
<!--
#prova
{
   position : absolute;
   top : 2000 px;
   left : 152 px; 
   zindex : 1;
}
 -->
</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">
<!--
#prova
{
   position : absolute;
   top : "+y+" px;
   left : "+x+" px; 
   zindex : 1;
}
 -->
</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 !

**dementialsite** · 30-12-2008, 18.50.52

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...

**alemoppo** · 30-12-2008, 23.27.54

Ho fatto così:

Codice HTML:

<html>
<head>
<title>
prova
</title>
<style type="text/css">
<!--
#prova
{
	position : absolute;
	zindex : 1;
}
 -->
</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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</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)

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!!

**dementialsite** · 31-12-2008, 12.52.03

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...

**alemoppo** · 01-01-2009, 02.51.38

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

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

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

Grazie

EDIT:

Ti (ri)posto il codice:

Codice HTML:

</title>
<style type="text/css">
<!--
#prova
{
	position : absolute;
	z-index : 1;
}
 -->
</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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

01-01-2009, 13.33.22

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";

**alemoppo** · 01-01-2009, 18.01.29

no, non funziona

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!

04-01-2009, 19.12.11

Prova così

Codice HTML:

<html>
<head>
	<title>
		prova
	</title>
	<style type="text/css">
	<!--
	#prova { 
		position : absolute;
		z-index : 1;
	}
	-->
	</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>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

**alemoppo** · 04-01-2009, 19.47.46

Grazie 1000 per la risposta...

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

Codice HTML:

<html>
<head>
	<title>
		prova
	</title>
	<style type="text/css">
	<!--
	#prova { 
		position : absolute;
		z-index : 1;
		}
	-->
	</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>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</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...

04-01-2009, 19.51.09

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

**alemoppo** · 04-01-2009, 19.57.23

Ma quante ne sai ?????

FUNZIONAAA!!!

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]

...).

Ti (ri)ringrazio..

CIAO!!!

Discussione: posizionare immagine coordinate assolute

LinkBack

Strumenti discussione

Display

posizionare immagine coordinate assolute

Regole di scrittura