✔ Bilder bewegen lassen

Pius Hermit

Pius Hermit

Erfahrenes Mitglied
Hallo Ihr Lieben,
habe nun begonnen, mich mehr mit JavaScript (früher Java) auseinanderzusetzen.
Leider geht nicht viel in meinen Testentwürfen:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
	var scr = 
  	{
  	x:0, y:0, dx:5, dy:5, dt:100,
  	fenster: GetElementbyName("huhn"), 
  	timer: null,
  	start: function()
	  	{
	  	scr.timer = setInterval(scr.weiter, scr.dt);
	  	}
  	weiter: function()
  		{
		scr.x += scr.dx;
		scr.fenster.moveTo(scr.x, scr.y);
  		}
  	}
</script>
</head>
<body>
<button "onclick = "scr.weiter()">Start</button>
<iframe src="huhn.gif" name="huhn" width="150" marginwidth="0" height="150" marginheight="0" align="left" scrolling="no" frameborder="0" hspace="3" vspace="3"></iframe>
</body>
</html>
1.) Weiß jemand vielleicht, warum der Quellcode keine Wirkung - kein Scrollen - bewirkt?
2.) Kennt jemand gute Javascript-Editoren
3.) Wie läßt sich beim Browser (insb. IE) die Blockierung von Scriptelementen ausschalten?
Für Antworten auf die für Euch sicherlich simplen Fragen wäre ich sehr dankbar...
Ulrich

Ach ja, zum gesuchten Editor....
Ich bin beim Java-Programmieren durch Eclipse etwas verwöhnt...
Weiß jemand, ob es da etwas ähnliches gibt?
Zusatz 13:20 Teste gerade das "Aptana" Plugin für Eclipse - Dank an Lord Nikkon!

Und zum Quellcode: Den Aufruf der "Start"-Funktion habe ich ebenso ausprobiert, wie vor das GetElementByName eine "document." zu setzen: Nichts geht:confused:
 
Zuletzt bearbeitet:
Moin,

da gäbe es eine Menge zu sagen
  • Wenn du auf ein Element zugreifen willst, muss es zu dem Zeitpunkt schon bekannt sein...ist es bei dir aber nicht, weil du das Objekt im Quelltext vor dem iframe erstellst
  • Im Objekt selbst musst du per this auf das Objekt zugreifen, statt wie in deinem Fall mit dem Objekt-Namen(scr)
  • Die Methode heisst getElementsByName(), und da ein Name ehrfach vergeben werden kann, musst du den Index dazu angeben, ...ferner ist diese Methode dem Dokument-Objekt zugehörig, also
Code: 
 document.getElementsByName("huhn")[0]
  • Vergiss alles aus 3. :)
    per getElementsByName() greifst du auf ein DOM-Objekt zu, die Methode moveTo() ist aber die Methode des window-Objektes, du musst das iframe daher anders ansprechen:
Code: 
window.huhn
  • Du willst scrollen, die Methode dafür heisst scrollTo() nicht moveTo()
...so, das wäre es für den Anfang :-(
 
Zunächst agnz herzlichen Dank an Sven!
Und Entschuldigung, ich habe mich falsch ausgedrückt:
Ich möchte ein Bild von links in den Bildschirm einfließen lassen, wandern, und dann rechts wieder ausfließen lassen, so dass wohl doch "moveto" geeignet wäre.

Nun habe ich meinen Quellcode dank Svens Hilfe angeändert in:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<iframe src="huhn.gif" name="huhn" width="150" marginwidth="0" height="150" marginheight="0" align="left" scrolling="no" frameborder="0" hspace="3" vspace="3"></iframe>
<script language="JavaScript" type="text/javascript">
	var scr = 
  	{
  	x:0, y:0, dx:5, dy:5, dt:100,
  	fenster: document.huhn, 
  	timer: null,
  	start: function()
	  	{
	  	this.timer = setInterval(this.weiter, this.dt);
	  	}
  	weiter: function()
  		{
		this.x += this.dx;
		window.this.fenster.moveTo(this.x, this.y);
  		}
  	}
</script>
<button "onclick = "scr.start()">Start</button>
</body>
</html>
Bin ich zu blöd? :eek:
 
Zuletzt bearbeitet:
Ein Bild ist auch kein window-Objekt, kennt daher die Methode moveTo() nicht.

Wenn du ein Bild im Fenster verschieben willst, musst du es absolute positionieren und dessen style-Eigenschaften top und left ändern ;)
 
Zuletzt bearbeitet:
Nun, ich hatte eigentlich vor, das Bild im <iframe> einzubetten, und das iframe zu verschieben. Das müßte doch möglich sein...?
Wenn ich nur das / die Bild(er) verschiebe, kann ich möglichweise nicht bewirken, dass diese sich in und aus dem Browser verschieben, und im Moment des Ein- und Austritts nur teilweise sichtbar sind.
Kennst Du dafür vielleicht einen Weg?
 
So, habe jetzt etwas gebastelt, mein aktueller Quellcode:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<img  id = "1000" src="huhn.gif" style = " position:absolute; left:0" width="122" height="105">
<script language="JavaScript" type="text/javascript">
	function start(obj_id)
	{
		var obj_ref = document.getElementById(obj_id);
		var w = 122;
		var dx = 1;
		var x = -dx;
		do
		{
			x += dx;
			wait(5000);
			roll(obj_ref, x);
		 }
		 while (x<=screen.width+w)
	}
	function roll(obj_ref, x)
	{
		obj_ref.style.left = x; 
	}
	function wait(s)
	{
		for (i = 0; i < s; i++) {}
	}
</script>
<button onClick="start(1000)" style="position: absolute; top:auto ">Start</button>
</body>
</html>

Diese implementierungsweise zeigt jedoch nur im IE7 dann Zwischenpositionen vom Bild, wenn wegen der JS-Bedingten Verzögerung eine Warnung vom Browser abgegeben wird. Irgenwie komme ich nicht weiter...:rolleyes:

@ Admin: Kannst Du bitte das Thema auf "Bilder bewegen lassen" ändern? Ganz herzlichen Dank! (Den Titel habe ich falsch gewählt *schäm*)
 
Soderle, ich arbeite jetzt mit APTANA....

Allerdings bin ich zur Ansicht gekommen, dass das IMG-Object dynamisch angelegt werden sollte. APTANA zeigt keine Fehler an, aber der IE7:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
	Bild.x = 0;
	Bild.dx = 5;
	Bild.img = document.createElement("img");
	Bild.dt = 100;
	Bild.img.scr = "huhn.gif";
	Bild.img.style.position = "absolute";
	Bild.img.style.top = 100;
	Bild.img.style.left = Bild.x;
	function Bild() 
	{
		document.getElementsByTagName('body')[0].appendChild = this.img;
		var timer = setInterval(this.schiebe(), this.dt);
	}
		
	Bild.schiebe = function() 
	{
		this.img.style.left = this.x; 
		this.x += this.dx;
	}

</script>
</head>
<body>
<button onClick="new Bild()" style="position: absolute; top:auto ">Start</button>
</body>
</html>

Weiß jemand, wieso das nicht funktioniert?
Dankbar für alle Anregungen,
Ulrich
 
Zuletzt bearbeitet:
Auch dort gibt es wieder diverse Fehlerquellen und Stolpersteine :)
Code: 
Bild.x = 0;
	  	Bild.dx = 5;
	Bild.img = document.createElement("img");
	Bild.dt = 100;//.........
Bild ist dort gänzlich unbekannt.
Code: 
Bild.img.scr
...das Attribut heisst src
Code: 
document.getElementsByTagName('body')[0].appendChild = this.img;
appendChild ist eine Methode unt erwartet als Parameter das anzuhängende Objekt
Code: 
document.getElementsByTagName('body')[0].appendChild( this.img);
Code: 
var timer = setInterval(this.schiebe(), this.dt);
setInterval() ist eine Methode des window-Objektes, dir geht dort gänzlich der Bezug zum Objekt verloren, per this erhältst du keinen Zeiger auf dein selbsterstelltes Objekt, sondern einen auf das window-Objekt.


So herum geht es:
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2008-11-01"  />
<title>Test</title>
<script type="text/javascript">
<!--
  Bild=function()
  {
    this.name='img_'+new Date().getTime();
    window[this.name]=this;
    this.x = 0;
    this.dx = 5;
    this.dt = 100;
    this.img = document.createElement("img");
    this.img.src = "http://www.tutorials.de/forum/avatars/pius+hermit.gif?dateline=1196603922";
    this.img.style.position = "absolute";
    this.img.style.top = 100;
    this.img.style.left = this.x;
    document.getElementsByTagName('body')[0].appendChild(this.img);
    this.schiebe = function() 
      {
        this.img.style.left = this.x; 
        this.x += this.dx;
      }
    this.timer = setInterval(this.name+'.schiebe()', this.dt);
  }
//-->
</script>
</head>
<body onclick="new Bild()">
</body>
</html>

Die wichtigste Änderung:
Code: 
this.name='img_'+new Date().getTime();
    window[this.name]=this;
Es wird quasi eine eindeutige ID für das Objekt erzeugt(in diesem Fall anhand des aktuellen Timestamps).
Diese wird benötigt, um das Objekt später von ausserhalb ansprechen zu Können(beim setInterval())
Das Objekt selbst wird unter dieser ID als globale Variabe gespeichert.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück