nicht angemeldet
Mouseover/Mouseout Bildwechsel advanced
0 0 
Der Martin
0 0 
Struppi
Mouseover/Mouseout Bildwechsel advanced
Hallo zusammen
Wie man erfolgreich einen Bildwechsel mittels Javascript realisiert, habe ich inzwischen drausen. Ich habe jetzt aber folgendes Vorhaben, und scheitere an einem guten Lösungsansatz. Vielleicht kennt jemand Beispiele dazu, ich hab nichts gescheites gefunden...
Also, mein Vorhaben.
Ich hab ein Bild auf meiner Seite, nennen wir es 'Bild1'
Dann habe ich diverse Links, z.B. 'Rot', 'Grün', 'Blau', 'Gelb', usw.
Ich möchte jetzt, dass wenn ich über den Link 'Grün' fahre, das 'Bild1'
wechselt zu 'grün.gif'.
Sobald ich aber wieder weg fahre, soll das alte
Bild wieder zurückwechseln.
Das Problem ist aber, dass das alte Bild nicht immer dasselbe ist:
Wenn ich auf einen dieser Links, z.B. 'Grün' klicke, soll die Grafik 'Bild1' wechseln und so bleiben.
Ich müsste also irgendwie eine Variable, die den IST-Zustand definiert definieren, und diese entsprechend füllen. Beim Mouseout, soll dann 'Bild1' wieder in diesen IST-Zustand zurück. Und beim onMouseClick soll der IST-Zustand neu überschrieben werden..
Klingt eigentlich ganz harmlos, aber irgendwie kreig ich's nicht hin...
Hoffe es kann mir jemand helfen.
Danke und Grüsse, dt44
-
Hi dt44,
also ich habs erst nach dem 3 mal durchlesen kapiert und mal was geschrieben(ungetestet, verbesserungswürdig). Also ich glaube, das ich dich richtig verstanden habe und dementsprechend auch der Sinn des Skriptes ist. Wenn ich falsch liege, korrigier mich bitte...
Hier das Skript(Vorschlag):
<html>
<head>
<title>...</title>
<script type="Text/Javascript">
function WechselDich(Bild)
{
if (document.getElementById('Bildwechsel').value=="yes")
{
document.images["Bild1"].src=Bild;
}
}function Bleibe(Bild)
{
document.getElementById('Bildwechsel').value="no";
document.images["Bild1"].src=Bild;
}
function Wechsel()
{
document.getElementById('Bildwechsel').value="yes";
}
</script>
</head><body>
<img src="Bild1.gif" name="Bild1">
<input type="Hidden" value="yes">
<a href="#" onMouseOver="WechselDich('grün.gif')" onMouseOut="WechselDich('Bild1.gif');Wechsel()" onClick="Bleibe('grün.gif')">Grün</a>
</body>
</html>Also, mein Vorhaben.
Hat der Bildwechsel eigentlich einen Sinn, oder machst du das nur so zum spaß ?
Und beim onMouseClick soll der IST-Zustand neu überschrieben werden..
Was ist bitte onMouseClick??? --> wenn, dann onclick !!!
Hoffe es kann mir jemand helfen.
naja, ich habs versucht ^^
--
Wo die Sprache aufhört, fängt die Musik an...
ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:) -
Hallo,
jetzt aber folgendes Vorhaben, und scheitere an einem guten Lösungsansatz.
wieso eigentlich - du formulierst die Lösung doch schon in Worten!
Ich müsste also irgendwie eine Variable, die den IST-Zustand definiert definieren, und diese entsprechend füllen. Beim Mouseout, soll dann 'Bild1' wieder in diesen IST-Zustand zurück.
Genau. Also frage beim mouseover-Event den aktuellen Zustand (src-Eigenschaft) von Bild1 ab und speichere diesen Wert als neue Eigenschaft in Bild1. Beim mouseout-Event schreibst du diesen gespeicherten Wert wieder als src-Eigenschaft in Bild1.
Und beim onMouseClick soll der IST-Zustand neu überschrieben werden..
Warum beim Klick? Ich würde den Zustand, wie eben beschrieben, erst auslesen, bevor ich ihn ändere.
So long,
Martin--
Verliebt: Er spricht, sie lauscht.
Verlobt: Sie spricht, er lauscht.
Verheiratet: Beide sprechen, und die Nachbarn lauschen. -
Hei ihr beiden
Danke vielmal für eure Antworten. Haben mich beide zu meinem funktionierendem Ergebnis geführt. Das ganze sieht jetzt so aus:
<html> <head> <title>...</title> <script type="Text/Javascript"> var old; function Wechsel(what,bild) { if (what == '0') { old = document.images["Bild1"].src; document.images["Bild1"].src=bild; } if (what == '1') { document.images["Bild1"].src=old; } if (what == '2') { old = bild; document.images["Bild1"].src=bild; } } </script> </head> <body> <a href="#" onMouseOver="Wechsel('0','grün.gif')" onMouseOut="Wechsel('1','')" onClick="Wechsel('2','grün.gif')">Grün</a> <a href="#" onMouseOver="Wechsel('0','gelb.gif')" onMouseOut="Wechsel('1','')" onClick="Wechsel('2','gelb.gif')">Gelb</a> <a href="#" onMouseOver="Wechsel('0','rot.gif')" onMouseOut="Wechsel('1','')" onClick="Wechsel('2','rot.gif')">Rot</a> <img src="original.gif" name="Bild1"> </body> </html>Das ganze war natürlich nicht nur zum Spass. Soll eine Art Produktkonfigurator werden, beim drüberfahren wechselt die Farbe und man
sieht wie es aussehen könnte, und wenn man drück, wird die Farbe gewählt...Nochmals vielen Dank,
Grüsse, dt44 -
Wie man erfolgreich einen Bildwechsel mittels Javascript realisiert, habe ich inzwischen drausen. Ich habe jetzt aber folgendes Vorhaben, und scheitere an einem guten Lösungsansatz. Vielleicht kennt jemand Beispiele dazu, ich hab nichts gescheites gefunden...
Meinst du sowas?
Struppi.