Rollover / Bildwechsel
frank0703
- javascript
Hallo,
nach einigen Stunden der Suche und ausprobieren, werfe ich das Handtuch und bitte um Eure Hilfe.
Also ich habe ein animiertes Männchen, welches automatisch von links nach rechts gehen soll, dann folgt der Bilderwechsel auf das Männchen, das von rechts nach links geht.
Ich bekomme es hin, dass das Männchen ohne Bildwechsel von links nach rechts und umgekehrt geht, aber dann geht es zurück ja rückwärts.
Es darf auch gerne ein ganz anderes Script sein. Hauptsache das klappt.
Vielen Dank für Eure Mühe.
...
<script type="text/javascript" src="script/lib/prototype.js"></script>
<script type="text/javascript" src="script/src/scriptaculous.js"></script>
<script type="text/javascript">
Rollimage = new Array()
Rollimage[0]= new Image(25,30)
Rollimage[0].src = "wachmann.gif"
Rollimage[1] = new Image(25,30)
Rollimage[1].src = "wachmann_links.gif"
function moveRight(){
Effect.MoveBy('Rollimage[0].src', 0, 100,
{duration:5, transition:Effect.Transitions.sinoidal, afterFinish: moveLeft});
}
function moveLeft(){
Effect.MoveBy('Rollimage[1].src', 0, -100,
{duration:5, transition:Effect.Transitions.sinoidal, afterFinish: moveRight});
}
</script>
</head>
<body onload="moveRight();">
<div style="width:250px; height:300px; position:absolute;">
<img src="wachmann.gif" id='Rollimage[0].src' style="position:absolute; left:120px; z-index:1;" />
</div>
</body>
</html>
... ich nochmal,
es ist natürlich Rollimage - nicht Rollover
Moin!
Keine Ahnung, was Du da fuer ein Framework benutzt, aber ich sehe nichts was darauf schliessen laesst, dass Du dem Bild eine neue Quelle (das andere Bild) zuweist. Du sprichst, so wie ich es interpretiere, lediglich ein Bild mit der (merkwuerdigen) ID 'Rollimage[0].src' an, das dann wohl nach rechts wandert. Warum das nach links wandert, wenn du die ID 'Rollimage[1].src' ansprichst, die ich nicht finden kann, wundert mich eher etwas.
Mahlzeit Steel,
Keine Ahnung, was Du da fuer ein Framework benutzt,
Vermutlich
<script type="text/javascript" src="script/lib/prototype.js"></script>
<script type="text/javascript" src="script/src/scriptaculous.js">
oder was meinst Du? :-)
lediglich ein Bild mit der (merkwuerdigen) ID 'Rollimage[0].src'
Die ist in der Tat merkwürdig ... ich vermute, dass frank0703 da noch etwas an seinem grundlegenden Verständnis von Javascript, DOM und HTML feilen muss.
MfG,
EKKi
Moinsen!
Keine Ahnung, was Du da fuer ein Framework benutzt,
Vermutlich
<script type="text/javascript" src="script/lib/prototype.js"></script>
<script type="text/javascript" src="script/src/scriptaculous.js">oder was meinst Du? :-)
Es muss Montag sein...
Was fuer mich aber nichts dran aendert, dass ich das Zeug, das er schreibt, nicht kenne. Ich muss also etwas raten, wenn ich mir jetzt nicht Dokumentationen reinpfeiffen will.
Vielen Dank für Eure schnelle Antwort.
Könnt Ihr mir denn irdendwie helfen?
Was ich brauche wisst Ihr doch sicher. Es kann ja auch ein anderes Script sein.
Danke
frank0703
Mahlzeit frank0703,
Könnt Ihr mir denn irdendwie helfen?
Jein. Ich z.B. könnte Dir helfen, Dir selbst zu helfen:
Rollimage = new Array()
Rollimage[0]= new Image(25,30)
Rollimage[0].src = "wachmann.gif"
Hier definierst Du Dir ja ein Array, in das Du dann die von Dir verwendeten Bilder einfüllst. (1)
function moveRight(){
Effect.MoveBy('Rollimage[0].src', 0, 100,
{duration:5, transition:Effect.Transitions.sinoidal, afterFinish: moveLeft});
}
Was Du allerdings hier machen willst, ist mir nicht ganz klar. Du übergibst der Methode "MoveBy()" des Objekts "Effekt" als ersten Parameter den String 'Rollimage[0].src' - was genau bezweckst Du damit? Laut der Doku zu Scriptacoulous erwartet die Methode als ersten Parameter entweder die ID eines Elements oder das Element selbst ... das ist das, was ich mit "grundlegenden Verständnis von Javascript, DOM und HTML" meinte.
Was ich brauche wisst Ihr doch sicher.
Wissen: nein. Erahnen: ja.
Es kann ja auch ein anderes Script sein.
Muss es ja gar nicht - Du musst nur das vorhandene korrekt nutzen. :-)
(1) Im Übrigen solltest Du Dir vielleicht angewöhnen, auch in Javascript *ALLE* Anweisungen mit einem Semikolon abzuschließen - es ist vielleicht nicht unbedingt erforderlich, erhöht aber deutlich die Lesbarkeit des Codes.
MfG,
EKKi
Hallo EKKI,
das hatte ich eigentlich auch so in etwa verstanden, jedoch wenn ich die images anstatt die Bezeichnung des Arrays einfüge, komme ich mit der Syntax nicht klar.
Im HTML Teil wird eine ID erwartet.
Ich habe schon alles mögliche ausprobiert. Es klappt einfach nicht.
Danke und Gruß
frank0703
Mahlzeit frank0703,
Könnt Ihr mir denn irdendwie helfen?
Jein. Ich z.B. könnte Dir helfen, Dir selbst zu helfen:
Rollimage = new Array()
Rollimage[0]= new Image(25,30)
Rollimage[0].src = "wachmann.gif"Hier definierst Du Dir ja ein Array, in das Du dann die von Dir verwendeten Bilder einfüllst. (1)
function moveRight(){
Effect.MoveBy('Rollimage[0].src', 0, 100,
{duration:5, transition:Effect.Transitions.sinoidal, afterFinish: moveLeft});
}Was Du allerdings hier machen willst, ist mir nicht ganz klar. Du übergibst der Methode "MoveBy()" des Objekts "Effekt" als ersten Parameter den String 'Rollimage[0].src' - was genau bezweckst Du damit? Laut der Doku zu Scriptacoulous erwartet die Methode als ersten Parameter entweder die ID eines Elements oder das Element selbst ... das ist das, was ich mit "grundlegenden Verständnis von Javascript, DOM und HTML" meinte.
Was ich brauche wisst Ihr doch sicher.
Wissen: nein. Erahnen: ja.
Es kann ja auch ein anderes Script sein.
Muss es ja gar nicht - Du musst nur das vorhandene korrekt nutzen. :-)
(1) Im Übrigen solltest Du Dir vielleicht angewöhnen, auch in Javascript *ALLE* Anweisungen mit einem Semikolon abzuschließen - es ist vielleicht nicht unbedingt erforderlich, erhöht aber deutlich die Lesbarkeit des Codes.
MfG,
EKKi
Hallo,
das hatte ich eigentlich auch so in etwa verstanden, jedoch wenn ich die images anstatt die Bezeichnung des Arrays einfüge, komme ich mit der Syntax nicht klar.
Im HTML Teil wird eine ID erwartet.
Ich habe schon alles mögliche ausprobiert. Es klappt einfach nicht.
bist Du auch schon einmal auf die Idee gekommen, Deine Funktion mit zwei Anweisungen statt einer auszustatten?
function moveRight(){
// Ergänze: Setze die src-Eigenschaft des Elementes mit der vorgegebenen id
// auf das gewünschte Bild
Effect.MoveBy('Rollimage[0].src', 0, 100,
{duration:5, transition:Effect.Transitions.sinoidal, afterFinish: moveLeft});
}
Zusatztipp: Verwende einen sinnvolleren Wert für die id.
Denke daran, dass Du auch bei moveLeft() zuerst das gewünschte Bild auswählen musst, sonst wird im Endlosbetrieb außer beim ersten Mal Dein Männchen immer nach links schauen ...
Noch etwas: Zitiere bitte sinnvoll und verzichte auf TOFU.
Freundliche Grüße
Vinzenz
Hallo,
ich kriegs nicht hin.
Wenn mir bitte jemand den Code geben würde - vielleicht verstehe ich es dann.
Ich bin ja noch Anfänger.
Jedenfalls bedanke ich mich für Eure Mühe.
Gruß
frank0703
Hallo zusammen,
schickt mir keiner das Script?
Gruß
frank0703
Mahlzeit frank0703,
schickt mir keiner das Script?
MfG,
EKKi
Mahlzeit frank0703,
Wenn mir bitte jemand den Code geben würde - vielleicht verstehe ich es dann.
Ich bin ja noch Anfänger.
Gerade als Anfänger wäre es sinnvoll, sich zuallererst mit den Grundlagen der verwendeten Technologien zu beschäftigen ... und komplexe Frameworks wie Prototype samt Add-Ons wie Scriptacoulous gehören sicherlich *nicht* dazu.
MfG,
EKKi
Mahlzeit frank0703,
das hatte ich eigentlich auch so in etwa verstanden, jedoch wenn ich die images anstatt die Bezeichnung des Arrays einfüge, komme ich mit der Syntax nicht klar.
Was genau ist Dein Problem mit der Syntax? "Ich krieg's nicht hin" ist genauso wie "funzt net" *keine* eindeutige, hilfreiche und sinnvolle Problembeschreibung.
Im HTML Teil wird eine ID erwartet.
Welchen HTML-Teil meinst Du?
Ich habe schon alles mögliche ausprobiert. Es klappt einfach nicht.
"Alles mögliche" ganz sicher nicht. Und was ich (und auch andere hier) von "klappt nicht" halten, kannst Du oben bzw. in den Tipps für Fragende nachlesen.
Dann mal zum Thema:
Ich schrieb, dass die Methode "MoveBy()" offenbar als ersten Parameter die ID eines Elements oder das Element selbst erwartet. Ist Dir klar, was damit gemeint ist?
Du übergibst der Methode einen String (der eine ID sein könnte) - allerdings existiert im ganzen Dokument kein einziges Element, das die ID "Rollimage[0].src" besitzt. Darüber hinaus vergibst Du Deinen Bildern offenbar auch gar keine ID - der Zugriff darüber *kann* also gar nicht funktionieren.
Die Alternative wäre, der Methode das Element selbst bzw. eine Referenz darauf zu übergeben. Deine Bild-Elemente liegen in einem Array vor. Mittels
Rollimage[0]
kannst Du auf das erste Element zugreifen ... wieso versuchst Du nicht einfach das mal als ersten Parameter?
Und grundsätzlich solltest Du Dir wirklich langsam überlegen, ob es nicht vielleicht sinnvoll wäre, zuallerst einmal die Grundlagen der Programmiersprache(n) zu lernen, mit denen Du Dich beschäftigst.
MfG,
EKKi