ubuntuusers.de

Ich bin Noob und habe eine mit Sicherheit wenig elegante Methode versucht, eine Art interaktiver Animation über html zu erschaffen.

Hier zunächst der Code, darunter die Beschreibung, was ich eigentlich vorhabe.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<script type="text/javascript">
function changeStat(){

	var newHTML = "<object id="para" data="film2prev.flv.SWF" type="application/x-shockwave-flash" width="200" height="203" play="true"
                    onmouseover="changeText()">

  <param name="movie" value="film2prev.flv.SWF">
  <param name="quality" value="high">
  <param name="scale" value="exactfit">
  <param name="menu" value="true">
  <param name="bgcolor" value="#000040">

</object>";

	document.getElementById("para").innerHTML = newHTML;
}
function changeBack(){

	var newHTML = "<object id="para" data="film2prev.flv.SWF" type="application/x-shockwave-flash" width="200" height="203" play="false"
                    onmouseover="changeText()" onmouseout="changeBack()">

  				<param name="movie" value="film2prev.flv.SWF">
  				<param name="quality" value="high">
  				<param name="scale" value="exactfit">
  				<param name="menu" value="true">
  				<param name="bgcolor" value="#000040">
				</object>";

	document.getElementById("para").innerHTML = newHTML;
}

</script>


<object id="para" data="film2prev.flv.SWF" type="application/x-shockwave-flash" width="200" height="203" play="false"
      onmouseover="changeStat()"
      onmouseout="changeBack()">

	  <param name="movie" value="film2prev.flv.SWF">
	  <param name="quality" value="high">
	  <param name="scale" value="exactfit">
	  <param name="menu" value="true">
	  <param name="bgcolor" value="#000040">
	  </object>

Mein Absicht ist es, eine interaktive Animation als SWF-Datei einzufügen. Die Animation funktioniert normalerweise.

Nun soll die Animation dann gespielt werden, wenn sich die Maus über ihr befindet und dann ruhen, wenn sich die Maus nicht über ihr befindet.

Bei onmouseover will ich die Funktion changeStat() aufrufen und vermittels innerHTML den gesamten <object>-tag überschreiben, allerdings mit play="true". Bei onmouseout soll changeBack() aufgerufen werden, die den gesamten object-tag erneut überschreibt, allerdings so, dass wieder play="false" dasteht.

Ich habe mich hier: http://www.tizag.com/javascriptT/javascript-innerHTML.php orientiert.

Wenn ich die Seite aber aufrufe, dann wird die Animation nicht abgespielt, auch wenn ich mit der Maus über sie gehe. Habe ich etwas übersehen? Was soll ich tun/modifizieren, um mein Ziel zu erreichen?

Ein Fehler der mir grad extrem auffaellt: Du musst " innerhalb eines mit "" begrenzten Strings unbedingt mit einem Backslash (\) escapen: \". Alternativ kannst du in JavaScript auch den String mittels ' definieren, dann braucht man die " in dem String nicht escapen. Des weiteren gehen mehrzeilige Strings nicht so leicht, dafuer muss man in JavaScript den String schliessen (entweder mit ' oder ", je nachdem womit er geoeffnet wurde) und anschliessend ein + schreiben, dann kann man den String in der naechsten Zeile mit einem ' oder " am Anfang weiterfuehren.

Gruss,

raziel

Danke, raziel. Hab das mit den ' jetzt berücksichtigt und wie folgt abgeändert, leider hat sich das Ergebnis nicht geändert.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

	document.getElementById('para').innerHTML = newHTML;
}
function changeBack(){

	var newHTML = '<object id='para' data='film2prev.flv.SWF' type='application/x-shockwave-flash' width='200' height='203' play='false' '+
	'onmouseover='changeText()'>'+

               '<param name='movie' value='film2prev.flv.SWF'>' +
               '<param name='quality' value='high'>' +
               '<param name='scale' value='exactfit'>' +
               '<param name='menu' value='true'>' +
              '<param name='bgcolor' value='#000040'>' +
              '</object>';


	document.getElementById('para').innerHTML = newHTML;
}

</script>


<object id='para' data='film2prev.flv.SWF' type='application/x-shockwave-flash' width='200' height='203' play='false' onmouseover='changeStat()' onmouseout='changeBack()'>

	  <param name='movie' value='film2prev.flv.SWF'>
	  <param name='quality' value='high'>
	  <param name='scale' value='exactfit'>
	  <param name='menu' value='true'>
	  <param name='bgcolor' value='#000040'>
	  </object>

Klar, wenn du ' zum definieren eines String benutzt, dann solltest du IM String " benutzen, nicht ', den muesstest du naemlich wieder escapen.

–-leuchtet ein. IM string hab ich jetzt " statt '. Event-Handling funktioniert zwar, da sich am Bild was tut, wenn ich mit der Maus drüber gehe und diese dann wegziehe. Aber

1. Die Animation wird nicht abgespielt, d. h. play="true" kommt irgendwie nicht an und

2. Dieser Block in der js-Funktion:

1
2
3
4
5
6
7

               '<param name="movie" value="film2prev.flv.SWF">' +
               '<param name="quality" value="high">' +
               '<param name="scale" value="exactfit">' +
               '<param name="menu" value="true">' +
              '<param name="bgcolor" value="#000040">' +

wird offenbar komplett ignoriert ☹

Hi, dein Ansatz, mit inner HTML das Object auszutauschen ist schon nicht der Richtige.

Du willst ja eigentlich das Abspielen ein- uns ausschalten.

Wenn du das ganze Object tauschst, dann wird ja der DOM "zerkloppt und das Teil dort neu geladen. Da du (und der DOM) nicht weißt, wann der Ladevorgang abgeschlossen ist und es keine Verpflichtung und keine Synchronisation gibt, damit das Object - wenn es denn einmal fertig geladen ist - auch noch noch Mouse-Events evtl. nachgereicht bekommt, wird es nicht gescheit zum Laufen kommen.

Du solltest den JW-Player nehmen http://www.longtailvideo.com/players/jw-flv-player da bekommste eine praktische Javascript API mit, womit du elegant starten stoppen und so Scherze machen kannst (das könntest du acuh selber machen, ist aber harte Arbeit). Mit so einem Player ewrreichst du auch, dass der Film gleich loslaufen kann und nicht erst die gesamte Datei runtergeladen werden muss.

Danke!! Die Erklärung, was am Ansatz falsch war, ist logisch.