✔ Bilder Wandern

Nuka

Nuka

Mitglied
Also, ich habe versucht ein Bild wandern zu lassen, aber leider bekomme ich das nicht hin!
Leider funktioniert das nicht so wie ich das will.
das Bild wmaploc geht ungefähr so(0 für nichts 1 für x 2 für y):
12222
12222
12222
es sollt aber so gehen
01000
00200
00010
...
ausserdem sehe ich das bewegen des Bildes nicht, wie kann ich das erreichen?
HTML: 
<script type="text/JavaScript">
<!--
function mapCoordinate(){
	wmaptarg.style.position = "absolute";
	if(navigator.appName == "Netscape")
		alert("X: "+ONCLICK.screenX+"\nY: "+ONCLICK.screenY);
	if(navigator.appName == "Microsoft Internet Explorer"){
		wmaptarg.style.top = window.event.y;
		wmaptarg.style.left = window.event.x;
		hotspot.style.visibility = "hidden";
		wandern('15','100',window.event.y,window.event.x);
	}
}
function wandern(start1,start2,ziel1,ziel2){
	wmaploc.style.position = "absolute";
	for(i = start1;i < ziel1;i++){
		wmaploc.style.top = i;
		for(j = start2;j < ziel2;j++){
			alert("wmaploc.style.left ="+ j);
			wmaploc.style.left = j;	}
	}
}
//-->
</script>
 
Das geht einfach zu schnell....

um diese Schleife durchzugehen, benötigt das Skript ein paar Millisekunden....daher siehst du die einzelnen Schritte nicht.
Du müsstest jeden einzelnen Schritt zeitverzögert ausführen, damit du etwas zu sehen bekommst.
Als Parameter sollte es reichen, wenn du lediglich die zu verändernden Koordinaten übergibst, und beim ersten Aufruf die Event-Koordinaten.
Danach kannst du ja auf die Attribute top/left direkt zugreifen.
 
Also, ich habe das jetzt hin bekommen:D, aber leider läuft das Skript immer noch zu schnell.
Wie kann ich das langsamer laufen lassen, vileicht über setInterval?
HTML: 
<script type="text/JavaScript">
<!--
//Status-Titel setzen
window.status = "fo-online.net - Ein Postnukleares Online-Spiel";
//Transparenz der Karte für jedes 50x50 große Feld setzen
if((navigator.appName.indexOf('Microsoft')+1))
	document.write('<style type="text/css">.tpa{filter: alpha(opacity=20)}.untpa{filter:alpha(opacity=100)}</style>');
if((navigator.appName.indexOf('Netscape')+1))
	document.write('<style type="text/css">.tpa{-moz-opacity:0.2} .untpa{-moz-opacity:1}</style>');
else
	document.write('');
//mapCo() gibt die X und Y Koordinate der Maus in bezug die Karte(<body>) aus
function wmapCo(){
	document.getElementById("hotspot").style.visibility = "hidden";
	document.getElementById("wmaploc").style.visibility = "";
	document.getElementById("wmaptarg").style.visibility = "";
	if(navigator.appName == "Netscape"){
		wmapx = ONCLICK.pageXOffset;
		wmapy = ONCLICK.pageYOffset;
	}
	if(navigator.appName == "Microsoft Internet Explorer"){
		wmapx = window.event.x;
		wmapy = window.event.y;
	}
	document.getElementById("wmaptarg").style.top = wmapy;
	document.getElementById("wmaptarg").style.left = wmapx;
	wandern('50','100',window.event.y,window.event.x,"3000");
}
//Wandern(StartX Koordinate,StartY Koordinate,ZielX Koordinate,ZielY Koordinate,Geschwindigkeit in ms), Läßt die Aktuelle Position durch ein Bild darstellen
function wandern(i,j,goal1,goal2,speed){
	//In alle Richtungen Wandern
	while(((i && j) < (goal1 && goal2)) || ((i && j) > (goal1 && goal2)) || ((i) < (goal1)) || ((j) < (goal2))){
		if(i < goal1)
			document.getElementById("wmaploc").style.top = i++;
		if(i > goal1)
			document.getElementById("wmaploc").style.top = i--;
		if(j < goal2)
			document.getElementById("wmaploc").style.left = j++;
		if(j > goal2)
			document.getElementById("wmaploc").style.left = j--;
		window.alert("X: "+j+"\nY: "+i);
	}
	document.getElementById("wmaploc").style.visibility = "hidden";
	document.getElementById("wmaptarg").style.visibility = "hidden";
	document.getElementById("hotspot").style.visibility = "";
	document.getElementById("hotspot").style.left = j;
	document.getElementById("hotspot").style.top = i;
}
//-->
</script>
 
Jo....setInterval() oder setTimeout() sind die Methoden, um etwas zeitlich zu steuern.
Etwas wie sleep() gibts in JS leider nicht...das wäre wohl recht hilfreich.

Wie genau du das da hinein bekommst, kann ich dir nicht sagen.... dafür müsstest du etwas mehr Code posten(damit man mal sehen kann, was da überhaupt vor sich geht :))
 
Okay, dann werde ich mal den Quelltext schreiben.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Weltkarte</title>
<style type="text/css">
td{
	width: 50;
	height: 50
}
</style>
<script type="text/JavaScript">
<!--
//Status-Titel setzen
window.status = "fo-online.net - Ein Postnukleares Online-Spiel";
//Transparenz der Karte für jedes 50x50 große Feld setzen
if((navigator.appName.indexOf('Microsoft')+1))
	document.write('<style type="text/css">.tpa{filter: alpha(opacity=20)}.untpa{filter:alpha(opacity=100)}</style>');
if((navigator.appName.indexOf('Netscape')+1))
	document.write('<style type="text/css">.tpa{-moz-opacity:0.2} .untpa{-moz-opacity:1}</style>');
else
	document.write('');
//mapCo() gibt die X und Y Koordinate der Maus in bezug die Karte(<body>) aus
function wmapCo(){
	document.getElementById("hotspot").style.visibility = "hidden";
	document.getElementById("wmaploc").style.visibility = "";
	document.getElementById("wmaptarg").style.visibility = "";
	if(navigator.appName == "Netscape"){
		wmapx = ONCLICK.pageXOffset;
		wmapy = ONCLICK.pageYOffset;
	}
	if(navigator.appName == "Microsoft Internet Explorer"){
		wmapx = window.event.clientX;
		wmapy = window.event.clientY;
	}
	document.getElementById("wmaptarg").style.top = wmapy;
	document.getElementById("wmaptarg").style.left = wmapx;
	wandern('50','100',window.event.y,window.event.x,"3000");
}
//Wandern(StartX Koordinate,StartY Koordinate,ZielX Koordinate,ZielY Koordinate,Geschwindigkeit in ms), Läßt die Aktuelle Position durch ein Bild darstellen
function wandern(i,j,goal1,goal2,speed){
	//In alle Richtungen Wandern
	while(((i && j) < (goal1 && goal2)) || ((i && j) > (goal1 && goal2)) || ((i) < (goal1)) || ((j) < (goal2))){
		if(i < goal1)
			document.getElementById("wmaploc").style.top = i++;
		if(i > goal1)
			document.getElementById("wmaploc").style.top = i--;
		if(j < goal2)
			document.getElementById("wmaploc").style.left = j++;
		if(j > goal2)
			document.getElementById("wmaploc").style.left = j--;
		window.alert("X: "+j+"\nY: "+i);
	}
	document.getElementById("wmaploc").style.visibility = "hidden";
	document.getElementById("wmaptarg").style.visibility = "hidden";
	document.getElementById("hotspot").style.visibility = "";
	document.getElementById("hotspot").style.left = j;
	document.getElementById("hotspot").style.top = i;
}
//-->
</script>
</head>
<body background="wmap.gif" onDblClick="wmapCo()">
<img src="wmaptarg.gif" id="wmaptarg" style="left: -10;top: -10;position: absolute">
<img src="wmaploc.gif" id="wmaploc" style="left: -10;top: -10;position: absolute">
<img src="hotspot1.gif" id="hotspot" style="left: 100;top: 50;position: absolute">
<table cellpadding="0" cellspacing="0" width="1400" height="1500" style="position: absolute; left: 0;top:0">
<tr>
	<td id="s1" background="no.gif" class="tpa"></td>
	<td id="s2" background="no.gif" class="tpa"></td>
	<td id="s3" background="no.gif" class="tpa"></td>
	<td id="s4" background="no.gif" class="tpa"></td>
	<td id="s5" background="no.gif" class="tpa"></td>
	<td id="s6" background="no.gif" class="tpa"></td>
	<td id="s7" background="no.gif" class="tpa"></td>
	<td id="s8" background="no.gif" class="tpa"></td>
	<td id="s9" background="no.gif" class="tpa"></td>
	<td id="s10" background="no.gif" class="tpa"></td>
	<td id="s11" background="no.gif" class="tpa"></td>
	<td id="s12" background="no.gif" class="tpa"></td>
	<td id="s13" background="no.gif" class="tpa"></td>
	<td id="s14" background="no.gif" class="tpa"></td>
	<td id="s15" background="no.gif" class="tpa"></td>
	<td id="s16" background="no.gif" class="tpa"></td>
	<td id="s17" background="no.gif" class="tpa"></td>
	<td id="s18" background="no.gif" class="tpa"></td>
	<td id="s19" background="no.gif" class="tpa"></td>
	<td id="s20" background="no.gif" class="tpa"></td>
	<td id="s21" background="no.gif" class="tpa"></td>
	<td id="s22" background="no.gif" class="tpa"></td>
	<td id="s23" background="no.gif" class="tpa"></td>
	<td id="s24" background="no.gif" class="tpa"></td>
	<td id="s25" background="no.gif" class="tpa"></td>
	<td id="s26" background="no.gif" class="tpa"></td>
	<td id="s27" background="no.gif" class="tpa"></td>
	<td id="s28" background="no.gif" class="tpa"></td>
</tr>
<tr>
	<td id="s29" background="no.gif" class="tpa"></td>
	<td id="s30" background="no.gif" class="tpa"></td>
	<td id="s31" background="no.gif" class="tpa"></td>
	<td id="s32" background="no.gif" class="tpa"></td>
	<td id="s33" background="no.gif" class="tpa"></td>
	<td id="s34" background="no.gif" class="tpa"></td>
	<td id="s35" background="no.gif" class="tpa"></td>
	<td id="s36" background="no.gif" class="tpa"></td>
	<td id="s37" background="no.gif" class="tpa"></td>
	<td id="s38" background="no.gif" class="tpa"></td>
	<td id="s39" background="no.gif" class="tpa"></td>
	<td id="s40" background="no.gif" class="tpa"></td>
	<td id="s41" background="no.gif" class="tpa"></td>
	<td id="s42" background="no.gif" class="tpa"></td>
	<td id="s43" background="no.gif" class="tpa"></td>
	<td id="s44" background="no.gif" class="tpa"></td>
	<td id="s45" background="no.gif" class="tpa"></td>
	<td id="s46" background="no.gif" class="tpa"></td>
	<td id="s47" background="no.gif" class="tpa"></td>
	<td id="s48" background="no.gif" class="tpa"></td>
	<td id="s49" background="no.gif" class="tpa"></td>
	<td id="s50" background="no.gif" class="tpa"></td>
	<td id="s51" background="no.gif" class="tpa"></td>
	<td id="s52" background="no.gif" class="tpa"></td>
	<td id="s53" background="no.gif" class="tpa"></td>
	<td id="s54" background="no.gif" class="tpa"></td>
	<td id="s55" background="no.gif" class="tpa"></td>
	<td id="s56" background="no.gif" class="tpa"></td>
</tr>
...
<tr>
...
	<td id="s840" background="no.gif" class="tpa"></td>
</tr>
</table>
</body>
</html>
 
So richtig werd ich daraus nicht schlau.
Ich hab so eine Vermutung, was du dort vorhast....

hab mal was hochgeladen.

Das Skript ist nicht kommentiert... sollte es das treffen, was da passieren soll, sag Bescheid....dann hole ich es nach;)

Das Posten hier spare ich mir erstamal... steht ja schon genug Code herum :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück