animazione elemento img [era: JAVASCRIPT HORROR]

**BIOHAZARD** · 13-06-2005, 14:10

Io ed un altro ragazzo abbiamo un problema e non ci intendiamo molto di JAVASCRIPT ! Dobbiamo riuscire a buttare giù uno JAVASCRIPT che possa permettere di fare apparire la immagine di una ragnatela in alto a sinistra di una WEB PAGE !
Per fare tutto ciò abbiamo deciso di impostare delle coordinate x ed y ma qualcosa non funziona e la immagine rimane sempre ferma anche se aumentiamo oppure diminuiamo le coordinate anche se non vengono rilevati errori sia da Internet Explorer che da JAVASCRIPT !

<SCRIPT language="JAVASCRIPT" type="text/JAVASCRIPT">

</SCRIPT>
[img]immagini/new.gif[/img]

**badaze** · 13-06-2005, 14:31

Cosa volete fare di preciso ?

Perche usate event ?

**BIOHAZARD** · 13-06-2005, 14:53

Grazie lo stesso ! Tutto OK !

<SCRIPT language="JAVASCRIPT" type="text/JAVASCRIPT">

</SCRIPT>
[img]immagini/new.gif[/img]

<BODY onLoad="biohazard()">
Avevo fatto un pochino di confusione !
Adesso vorrei sapere , come potrebbe essere possibile incrementare le coordinate di left e decrementare quelle di top quando ad esempio si muove il MOUSE ? Vorremo fare andare la immagine su e giù con onmousemove="biohazard()" !

**BIOHAZARD** · 13-06-2005, 19:27

UPPATE !

Come posso fare per fare scendere la immagine di un ragnetto su e giu allo SCROLL della WEB PAGE oppure al movimento del MOUSE ? Vorrei che il ragnetto potesse salire e scendere sopra la immagine di cui ho impostato le coordinate x ed y ! Possibile unire 2 Javascript insieme ? HELP !

**badaze** · 14-06-2005, 10:23

Prova questo (x IE)

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
 
<SCRIPT language="JAVASCRIPT" type="text/JAVASCRIPT"> 
<!-- 
function biohazard(event){ 
var a = event.srcElement;

document.web.style.position = "absolute"; 
document.web.style.top      = a.offsetTop-document.getElementById('web').height ; 
document.web.style.left     = a.offsetLeft; 
} 
//--> 
</SCRIPT> 

</head>
<body onmousemove="biohazard(event)">
[img]immagini/new.gif[/img] 




[img]immagini/new.gif[/img] 
[img]immagini/new.gif[/img]
[img]immagini/new.gif[/img]
[img]immagini/new.gif[/img]   
</body>
</html>

**BIOHAZARD** · 15-06-2005, 02:28

Ciao , si , potrebbe essere utile ! Lo ho modificato di pochissimo in base alle mie esigenze personali e penso che lo modificherò un altro pochino perchè abbiamo moltissime idee ( io e l ' altro ragazzo ) !
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>

<TITLE></TITLE>

<SCRIPT language="JAVASCRIPT" type="text/JAVASCRIPT">

</SCRIPT>
</HEAD>
<BODY onmousemove="biohazard(event)">
[img]new.gif[/img]

[img]new.gif[/img]
[img]new.gif[/img]
[img]new.gif[/img]
[img]new.gif[/img]
</BODY>
</HTML>
Funziona perfettamente ! Grazie 1000 !
Adesso però vorrei prendere in considerazione un altro problema che potrebbe essere molto utile per chi si possa trovare nella nostra identica situazione ! Stiamo realizzando un VIDEOGAME ! Si tratta di muovere la immagine di un aereo a destra , sinistra , su o giù ! Ho già buttato qualcosa ma non funge per come mi sarei aspettato perchè alla fine non dovrebbe essere molto difficile !
<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript" type="text/JavaScript">

</HEAD>
<BODY>
<TABLE align="center" bgcolor="#000000" width="50%" height="50%" cellpadding="0">
<TR align="center">
<TD align="center">
[img]aereo.png[/img]
</TD>
</TR>
<TR align="center">
<TD align="center">
<INPUT type="button" name="up" value="UP" onClick="up()">
<INPUT type="button" name="down" value="DOWN" onClick="down()">
<INPUT type="button" name="left" value="LEFT" onClick="left()">
<INPUT type="button" name="right" value="RIGHT" onClick="right()">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
HELP ! ! !

**badaze** · 15-06-2005, 12:06

Prova questo

codice:

<HTML> 
<HEAD> 
<TITLE></TITLE> 
<SCRIPT language="JavaScript" type="text/JavaScript">
<!-- 
function up() { 
common(-5,0);
} 
function down() { 
common(5,0);
} 
function left() { 
common(15,15);
} 
function right() { 
common(20,20);
} 

function common(top,left) {
document.getElementById('immagine').style.position="absolute"; 
document.getElementById('immagine').style.top=parseInt(document.getElementById('immagine').style.top)+top; 
document.getElementById('immagine').style.left=parseInt(document.getElementById('immagine').style.left)+left; 
}

var tIdX;
function animateX() {
 clearTimeout(tIdX);
 common(0,1)
 tIdX=setTimeout('animateX()', 40);
} // function animateX()

var tDrop;
var tDropFirst = true;
function dropBomb() {
 clearTimeout(tDrop);
 if (tDropFirst) {
  document.getElementById('bomb').style.position = "absolute"; 
  document.getElementById('bomb').style.top  = parseInt(document.getElementById('immagine').style.top)  + document.getElementById('immagine').height - 6; 
  document.getElementById('bomb').style.left = parseInt(document.getElementById('immagine').style.left) + parseInt(document.getElementById('immagine').width/2); 
	tDropFirst = false;
	status = document.getElementById('bomb').style.top + ' - ' + document.getElementById('bomb').style.left;
 }
 document.getElementById('bomb').style.top=parseInt(document.getElementById('bomb').style.top)+2; 
 document.getElementById('bomb').style.left=parseInt(document.getElementById('bomb').style.left)+1;  
 tDrop=setTimeout('dropBomb()', 60);
}
//--> 
</script>
</HEAD> 
<BODY> 

[img]Image5.jpg[/img] 

[img]Image4.jpg[/img] 
















<INPUT type="button" name="up" value="UP" onClick="up()"> 
<INPUT type="button" name="down" value="DOWN" onClick="down()"> 
<INPUT type="button" name="left" value="LEFT" onClick="left()"> 
<INPUT type="button" name="right" value="RIGHT" onClick="right()"> 
<INPUT type="button" name="start" value="start" onClick="animateX();if (!tDropFirst){dropBomb()};"> 
<INPUT type="button" name="stop" value="stop" onClick="clearTimeout(tIdX);clearTimeout(tDrop);"> 
<INPUT type="button" name="drop" value="Drop bomb" onClick="dropBomb();"> 
</BODY> 
</HTML>

In allegato le immagini image4 e image5 .jpg

**BIOHAZARD** · 15-06-2005, 14:48

Ma è bellissimo !

In confronto il mio sembrava la ricostruzione di un UFO precipitato al suolo ! Appena sgancio la bomba la medesima va giù fino a quando non premo STOP e comunque è più che accettabile ! Complimenti e grazie ancora !

Bè , si vede proprio che di JAVASCRIPT non me ne intendo ! Cercherò di studiare di più ! A presto !

**badaze** · 15-06-2005, 15:56

Si puo' migiorare comunque....

codice:

<HTML> 
<HEAD> 
<TITLE></TITLE> 
<SCRIPT language="JavaScript" type="text/JavaScript">
<!-- 
function up() { 
common(-5,0);
} 
function down() { 
common(5,0);
} 
function left() { 
common(15,15);
} 
function right() { 
common(20,20);
} 

function common(top,left) {
document.getElementById('immagine').style.position="absolute"; 
document.getElementById('immagine').style.top=parseInt(document.getElementById('immagine').style.top)+top; 
document.getElementById('immagine').style.left=parseInt(document.getElementById('immagine').style.left)+left; 
}

var tIdX;
function animateX() {
 clearTimeout(tIdX);
 common(0,1)
 tIdX=setTimeout('animateX()', 40);
} // function animateX()

var tDrop;
var tDropFirst = true;
function dropBomb() {
 clearTimeout(tDrop);
 if (tDropFirst) {
  document.getElementById('bomb').style.position = "absolute"; 
  document.getElementById('bomb').style.top  = parseInt(document.getElementById('immagine').style.top)  + document.getElementById('immagine').height - 6; 
  document.getElementById('bomb').style.left = parseInt(document.getElementById('immagine').style.left) + parseInt(document.getElementById('immagine').width/2); 
	tDropFirst = false;
	//status = document.getElementById('bomb').style.top + ' - ' + document.getElementById('bomb').style.left;
 }
 document.getElementById('bomb').style.top  = parseInt(document.getElementById('bomb').style.top)+2; 
 document.getElementById('bomb').style.left = parseInt(document.getElementById('bomb').style.left)+1;
 if (! scanTank()) {  
  tDrop=setTimeout('dropBomb()', 60);
 }
}

function scanTank() {
 b = document.getElementsByTagName('IMG');
 n = b.length;
 for (i=0;i<n;i++) {
  curImg = b.item(i);
	if (curImg.id.substr(0,4) == 'tank') {
	 posBombX  = document.getElementById('bomb').offsetLeft + document.getElementById('bomb').offsetWidth;
	 posBombY  = document.getElementById('bomb').offsetTop  + document.getElementById('bomb').offsetHeight;
	 tankLeft  = curImg.offsetLeft;
	 tankRight = tankLeft + curImg.offsetWidth;
	 tankUp    = curImg.offsetTop;
	 tankDown  = tankUp + curImg.offsetHeight;
	 status    = "posbomb:"+posBombY+'- tank :'+tankUp+'.'+tankDown;
	 if (posBombX >= tankLeft && posBombX <= tankRight) {
	  if (posBombY >= tankUp && posBombY <= tankDown) {
		 document.getElementById('bomb').style.top = -1000;
	   curImg.src = 'image8.jpg';
		 return true;
		} // if (posBombY >= tankUp && posBombY <= tankDown)
	 } // if (posBombX >= tankLeft && posBombX <= tankRight) 
	 if (posBombY >= tankDown) {
	  document.getElementById('bomb').style.top = tankUp;
	  document.getElementById('bomb').src       = "image9.jpg";
		return true;
	 } // 
	} // if (curImg.id.substr(0,4) == 'tank')
 } // for (i=0;i<n;i++)
 return false;
} // function scanTank()
//--> 
</script>
</HEAD> 
<BODY> 

[img]Image5.jpg[/img] 

[img]Image4.jpg[/img] 
















[img]Image7.jpg[/img] 
[img]Image7.jpg[/img] 
[img]Image7.jpg[/img] 



<INPUT type="button" name="up" value="UP" onmouseover="up()"> 
<INPUT type="button" name="down" value="DOWN" onmouseover="down()"> 
<INPUT type="button" name="left" value="LEFT" onClick="left()"> 
<INPUT type="button" name="right" value="RIGHT" onClick="right()"> 
<INPUT type="button" name="start" value="start" onClick="animateX();if (!tDropFirst){dropBomb()};"> 
<INPUT type="button" name="stop" value="stop" onClick="clearTimeout(tIdX);clearTimeout(tDrop);"> 
<INPUT type="button" name="drop" value="Drop bomb" onClick="dropBomb();"> 
</BODY> 
</HTML>

**BIOHAZARD** · 15-06-2005, 17:59

Lo trovo veramente bellissimo !

Mi piace un casino !

Eh , si , adesso mi imparo bene , bene lo JAVASCRIPT ! Purtroppo vorrei sapere anche che cosa fanno determinati comandi ma suppongo che ci vorrebbero troppi POST e quindi penso che la idea migliore sia mettermi a studiare lo JAVASCRIPT bene , bene ! Comunque complimentoni !

Davvero !

Grazie ancora per la disponibilità ! A presto !

Discussione: animazione elemento img [era: JAVASCRIPT HORROR]

Strumenti discussione

Ricerca discussione

Visualizza

JAVASCRIPT HORROR

Permessi di invio