Non riesco a far spostare l'immagine

25-03-2013, 17.42.20

Ciao a tutti. Ho un problema, non riesco a spostare l'immagine principale (quella con id "car" mentre le altre due sono immagini usate come button per spostare la prima). Mi sto scervellando ma non trovo l'errore. Grazie in anticipo, spero in un vostro aiuto

Codice HTML:

<html>
<head>
	<title>Evitali!</title>
    <style>
		#container {width:1400px; height:500px; background-image:url(route.png); margin-bottom:20px;}
		#up {margin-bottom:10px}
	</style>
	<script>
		function gounder() {
			var x = document.getElementById('car');
			var giu= parseInt(x.style.top);
			x.style.top = ((giu+2) + 'px');
		}
		
		function goup() {
			var x = document.getElementById('car');
			var su= parseInt(x.style.bottom);
			x.style.top = ((su+2) + 'px');
		}
		
		function muovisu(){
		var x=setTimeout('goup',10);
		}
		
		function muovigiu(){
		var x=setTimeout('gounder',10);
		}
					
	</script>
</head>
<body>
    	<div id='container'>
    		<img id='car' src="car.png" position="absolute; top:100px; left:20px">
    	</div>
        <div id='up'><img src='up.png' onClick="muovisu()" ></div>
        <div id='under'><img src="under.png" onClick="muovigiu()"></div>
</body>
</html>

25-03-2013, 23.01.33

Hai sbagliato la dichiarazione dello stile inline:

Codice:

<img id='car' src="car.png" position="absolute; top:100px; left:20px">

usa invece:

Codice:

<img id='car' src="car.png" style="position:absolute; top:100px; bottom:0; left:20px">

Aggiungi anche bottom:0; altrimenti quando poi vai a leggerne il valore, ottieni una stringa vuota... ed il parseInt che ci fai sopra ti porta ad avere x=NaN.

Inoltre la funzione setTimeout accetta come primo parametro una funzione, e non una stringa. Quindi in entrambe le dichiarazioni elimina le virgolette:

Codice:

function muovigiu(){
    var x=setTimeout(gounder, 10);
}

Questo dovrebbe essere un buon punto di partenza.

**alemoppo** · 25-03-2013, 23.17.25

Se vuoi fare un giochino, ti consiglio di usare le canvas!
Ciao!

26-03-2013, 15.15.14

Ciao e grazie a tutti. Ora la macchina si sposta, anche se esce dal div in cui l'ho messa(cosa che non capisco!) Vi spiego brevemente quello che vorrei cercare di fare :un auto su un tracciato che va su e giu e con immagini/ostacoli che arrivano da dx a sx e lei li deve evitare. Funzionante ciò, sostituirei le due immagini che fanno da bottoni con "W" e "S" tramite keypressed. Scusate la mia ignoranza ma non so proprio cosa siano i canvas

In più ho aggiunto questa procedura che dovrebbe far cambiare lo sfondo del div in quanto le due immagini sono route1.png e route2.png. Ma non funzia.

Codice HTML:

var z=setInterval(cambioimg,1000);
var i=1;
function cambioimg(){
		var w=document.getElementById('container');
		i=i+1;
		if (i>2) {
		i=1;
		}
		w.style.backgroundImage.url=('route'+i+'.png');
		}

03-04-2013, 14.33.32

Scusate se disturbo ancora, ma sto provando a gestire le immagini tramite oggetti, ma non riesco a visualizzarle. Non è che qualcuno di molto gentile potrebbe darmi una mano?

codice html

Codice HTML:

<html>
<head>
<title>Avoid Them!</title>
<style>
	#container {width:950px; height:400px; background-image:url(route1.png); margin-bottom:20px; border:1px solid black}
</style>
<script type="text/javascript" src="Objectz.js"></script>
<script>

var z,w;
var i=1;
var v=100;
var minh=235;
var maxh=75;
var car= new Macchina('car');
var zom = new Zombie('zom');

function changeimg(){
	w=document.getElementById('container');
	i=i+1;
	if (i>2) {
		i=1;
	}
	w.style.backgroundImage="url(route"+i+".png)";
}

function bground() {
	z=setInterval(changeimg,v);
}

function up(){
	car.goup();
}

function down(){
	car.godown();
}

function findkey(e) {
	key=e.keyCode;
	if (key==38) {
		var x=setTimeout(up,v);
	}
	if (key==40) {
		var x=setTimeout(down,v);
	}
}

</script>
</head>
<body onLoad="bground(),movezom()" onKeyPress="findkey(event)">
	<div id='container'></div>
</body>
</html>

libreria objectz

Codice HTML:

function Macchina(id){
	this.imgsrc='car.png';
	this.img=document.createElement("img");
	this.id=id;
	this.img.style.position='absolute';
	this.img.style.top='155px';
	this.img.style.left='30px';
	this.img.style.bottom='0';
	this.img.src=this.imgsrc;
	document.body.appendChild(this.img);
	this.godown=function() {
		var y=parseInt(this.img.style.top);
		if (y<=minh) {
		this.img.style.top=((y+40)+'px');
	}
	this.goup=function() {
		var y=parseInt(this.img.style.top);
		if (y>=maxh) {
		this.img.style.top=((y-40)+'px');
	}
}

function Zombie(id){
	this.imgsrc='zombie.png';
	this.img=document.createElement("img");
	this.id=id;
	this.img.style.position='absolute';
	this.img.style.left='1400px';
	this.img.style.bottom='0';
	document.body.appendChild(this.img);
}

**alemoppo** · 03-04-2013, 14.50.33

Nella libreria "Objectz" non hai chiuso le graffe dei due metodi dentro la classe "Macchina".

Quando si fanno queste cose, la prima cosa da fare è utilizzare il debug che offrono i browser: io uso firebug di firefox (è uno dei pochi motivi percui ancora installo firefox). Tutti i browser hanno le console/strumenti per sviluppatori, ed andrebbero usate. La seconda cosa è che (almeno io) in questi casi faccio un pezzo e lo testo se funziona. Non puoi scrivere righe e righe di codice senza esser sicuro che quello che hai fatto mezz'ora fa sia funzionante. Poi ti dimentichi anche i vari ragionamenti.

Ciao!

Discussione: Non riesco a far spostare l'immagine

LinkBack

Strumenti discussione

Display

Non riesco a far spostare l'immagine

Regole di scrittura