nicht angemeldet
Dynamische grafische Buttons, wie Ziel-Angabe für Wechsel?
Hallo,
Wie kann ich das Ziel für den Tausch der onMouseOver Grafik angeben?
Habe das Bsp. aus selfhtml übernommen und funktionert so mit 3 Grafiken.
Aber setze ich eine 4te Grafik in einer zusätzliche Tabellenspalte z.B. drüber, wird diese gewechselt.
Obwohl ich über eine ganz ander Grafik mit der Naus fahre.
Konnte dazu nichts finden, auch im Forum nicht.
Viele Grüsse
Thomas N == Neu-User
-
Hallo,
das ist auch logisch, denn wenn du eine neue Grafik über eine der alten einfügst, ändert sich die Nummerierung der Grafiken.
Was vorher document.images[3] war ist dann z.B. document.images[4];
Deshalb würde ich den Bildern eindeutige Namen geben, sprich:
<img name="bild1">
Und die BIlder dann in JS so ansprechen:
function wechsle(no)
{
document.images["bild" + no].src = "neu.gif";
}So kommt die Nummerierung nicht durcheinander.
Gruß
ueps
-
Hallo,
das ist auch logisch, denn wenn du eine neue Grafik über eine der alten einfügst, ändert sich die Nummerierung der Grafiken.
Logisch? ;-)
Was vorher document.images[3] war ist dann z.B. document.images[4];
Ja, wenn man annimmt, dass die Grafiken "global/Dokumentenweit" alle gezählt werden, dann finde ich das auch logisch! :-))
Das hat mir schon mal sehr viel geholfen!
Deshalb würde ich den Bildern eindeutige Namen geben, sprich:
<img name="bild1">
Und die BIlder dann in JS so ansprechen:
function wechsle(no)
{
document.images["bild" + no].src = "neu.gif";
}
So kommt die Nummerierung nicht durcheinander.Werde ich noch ausprobieren.
Gruß u. Dank
Thomas N == Neu-User-
Hallo,
wie kann ich denn mehrere verschiedene Bilder gleichzeitg wechseln?
Ich geh auf Bild A, dises wird mit B gewechselt und es soll sich aber zB ein ganz anderes Bild im Dokument auch bei diesem onMouseOver ändern.
Ich habe die entsprechende Objektinstanz erweitert und eine neue Funktion für einen "Dreierwechsel" kreiert (BildwechselX). Aber es wird geschimpft, dass "window.document.images" nicht stimmt.
Was muss ich ändern?<!--
start1 = new Image();
start1.src = "../pics/head/1.gif";
start2 = new Image();
start2.src = "../pics/head/2.gif";
start3 = new Image();
start3.src = "../pics/head/3.gif";function BildwechselX(Bildnr,Bildobjekt,Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src; /* diese Zeile blick ich nicht */
}
//-->
<body>
<a href="start.htm" target="body" onMouseOver="BildwechselX(4,start2,13,start3)" onMouseOut="Bildwechsel(4,start1)"><img src="../pics/head/1.gif"></a><img src="../pics/head/5.jpg"> <!-- diese Grafik soll sich auch mit ändern -->
</body>Gruß u. Dank
Thomas N == Neu-User-
Hallo,
function BildwechselX(Bildnr,Bildobjekt,Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src; /* diese Zeile blick ich nicht */
}Also das ist schon mal falsch, du übergibst zwei mal gleiche Variablen, da Funktioniert nicht.
Wenn dann musst du das so machen:
function BildwechselX(nr1, obj1, nr2, obj2)
{
document.images[nr1].src = obj1.src;
document.images[nr2].src = obj2.src;
}Aber wie gesagt du musst aufpassen ob die Bildnummern auch die richtige Reihenfolge im Dokument haben, besser ist es den Bildern namen zu geben:
<img name="bild1" src=.....>
und diese dann mit
document.images["bild" + nr].src
ansprechen.
Gruß
ueps
-
Hallo ueps,
was hab ich DAU mich gequält!
Ich hab im Buch "Webdesign in a Nutshell" de, 2.Auflage ein komplettes Bsp. gefunden und es funktioniert, guck mal, die Bildern haben jetzt auch "namen", wie gefällt es Dir?<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
<!--
if (document.images)
{
img1on = new Image();
img1on.src = "image1on.gif";img1off = new Image();
img1off.src = "image1off.gif";img1info = new Image();
img1info.src = "image1info.gif";
}function imgOn(imgName)
{
if (document.images)
{
document.images[imgName].src = eval(imgName + "on.src");
document.images["holder"].src = eval(imgName + "info.src");
}
}function imgOff(imgName)
{
if (document.images)
{
document.images[imgName].src = eval(imgName + "off.src");
document.images["holder"].src = "clear.gif";
}
}
//-->
</script></head><body>
<a href="page1.htm" onMouseOver="imgOn('img1')"
onMouseOut="imgOff('img1')">
<img name="img1" src="image1off.gif" width="96" height="24" border="0"></a>
<br><br>
<img name="holder" src="clear.gif" width="150" height="70" border="0">
</body>
</html>Viele Grüsse
Thomas N == Neu-UserP.S. Dies war ja der Ausgangspunkt, ich habe den Link jedesmal vergessen einzufügen!
Dynamische grafische Buttons:
http://selfhtml.teamone.de/javascript/beispiele/buttons.htm-
Hallo Thomas,
was hab ich DAU mich gequält!
das haben sich schon viele, aller Anfang ist halt schwer :-)
Ich hab im Buch "Webdesign in a Nutshell" de, 2.Auflage ein komplettes Bsp. gefunden und es funktioniert, guck mal, die Bildern haben jetzt auch "namen", wie gefällt es Dir?
Das Script ist sehr schön gemacht. Ich denke das ist eine gute Basis um damit weiter zu arbeiten.
P.S. Dies war ja der Ausgangspunkt, ich habe den Link jedesmal vergessen einzufügen!
Dynamische grafische Buttons:
http://selfhtml.teamone.de/javascript/beispiele/buttons.htmIst nicht so schlimm, das hatte ich noch so im Kopf. ;-)
Gruß
ueps
-
Hallo ueps,
Das Script ist sehr schön gemacht. Ich denke das ist eine gute Basis um damit weiter zu arbeiten.
Ich war auch gut zufrieden! Aber diese Zufriedenheit hält ja nicht lange an...
Schon wieder ein Problem, der ganze bisherige Zauber nützt mir nichts, da ich ein Konzept mit Frames gemacht habe.
Ich komme aber nicht drauf, wie ich diese zweite Grafik im Bsp. das (clear.gif) auswechseln kann, wenn es in einem anderen Frame sitzt.Z.B. von target="head" (da sitzt das rollOverScript) soll sich auch ein Bild in (target="body") ändern, geht das? :-)
Oder, muss ich jetzt auf Frames, oder "rollOverScript-DoubleGarfix" verzichten? :-(Viele Grüsse
Thomas N == Neu-User-
Hi,
Ich war auch gut zufrieden! Aber diese Zufriedenheit hält ja nicht lange an...
;-)
Ich komme aber nicht drauf, wie ich diese zweite Grafik im Bsp. das (clear.gif) auswechseln kann, wenn es in einem anderen Frame sitzt.
Z.B. von target="head" (da sitzt das rollOverScript) soll sich auch ein Bild in (target="body") ändern, geht das? :-)
Ja das geht,
du musst nur statt document.images["holder"] <--- Bild mit clear.gif
parent.body.document.images["holder"] nehemen.
Musst aber aufpassen, du schreibst das dein Frame body heißt, ich würde es vorher noch umbennen, da es in javascript ein body Objekt gibt das evtl. zu fehlern führt. Nimm doch statt body main oder so was...
Oder, muss ich jetzt auf Frames, oder "rollOverScript-DoubleGarfix" verzichten? :-(
Nein, das geht schon.
Gruß
ueps
-
Hi,
Ich komme aber nicht drauf, wie ich diese zweite Grafik im Bsp. das (clear.gif) auswechseln kann, wenn es in einem anderen Frame sitzt.
du musst nur statt document.images["holder"] <--- Bild mit clear.gif
parent.body.document.images["holder"] nehemen.Musst aber aufpassen, du schreibst das dein Frame body heißt, ich würde es vorher noch umbennen, da es in javascript ein body Objekt gibt das evtl. zu fehlern führt. Nimm doch statt body main oder so was...
Das hab ich dazu bei selfhtml gefunden:
frames: Allgemeines zur Verwendung
http://selfhtml.teamone.de/javascript/objekte/frames.htm#allgemeinesAber dann, wars schwierig!
Die Funktionen, Methoden, Eigenschaften usw. - der Michael hat das aber da am Anfang des JavaScript-Kapitels nicht soo toll erklärt! - mussten ja auch "angepasst" werden. Hab einmal den Operator "&&" genommen und das andere mal den "||" und siehe da es funkioniert, konnte ich kaum glauben!
Wenn ich das HTML-Dokument ausserhalb des Framesets aufrufe, dann passiert folgendes:1. mit "&&" funktioniert zwar der Link, aber kein Bild wechselt.
2. mit "||" wechselt kein Bild aber der Link funktioniert.Gib es da noch einen Trick, dass es "universell" auch ohne frames funkrioniert und ist das so OK was ich da geschustert habe?
hier das Script:
if (document.images && parent.main)
{
img1on = new Image();
img1on.src = "image1on.gif";img1off = new Image();
img1off.src = "image1off.gif";img1info = new Image();
img1info.src = "image1info.gif";
}function imgOn(imgName)
{
if (document.images && parent.main)
{
document.images[imgName].src = eval(imgName + "on.src");
document.images["holder"].src = eval(imgName + "info.src");
parent.main.document.images["holder"].src = eval(imgName + "info.src");
}
}function imgOff(imgName)
{
if (document.images && parent.main)
{
document.images[imgName].src = eval(imgName + "off.src");
document.images["holder"].src = "clear.gif";
parent.main.document.images["holder"].src = "clear.gif";
}
}Viele Grüsse
Thomas N == Neu-User-
Hi,
if (document.images && parent.main)
{
document.images[imgName].src = eval(imgName + "on.src");
document.images["holder"].src = eval(imgName + "info.src");
parent.main.document.images["holder"].src = eval(imgName + "info.src");
}Ich würde die Abfrage nach parent.main nicht mit document.images machen! Mach das so:
if (document.images)
{
document.images[imgName].src = eval(imgName + "on.src");
document.images["holder"].src = eval(imgName + "info.src");
if (parent.main)
parent.main.document.images["holder"].src = eval(imgName + "info.src");
}Gruß
ueps
-
Hi ueps,
Ich würde die Abfrage nach parent.main nicht mit document.images machen! Mach das so:
if (document.images)
{
document.images[imgName].src = eval(imgName + "on.src");
document.images["holder"].src = eval(imgName + "info.src");
if (parent.main)
parent.main.document.images["holder"].src = eval(imgName + "info.src");
}Wenn ich vom MouseOver-Button runtergehe, nachdem ich den Link betätigt habe, gibt es eine Fehlermeldung: ("parent.main.document.images.holder" ist Null oder kein Objekt), die Zeile, die angegeben wird enthält weit und breit kein "parent.main....". Bin etwas ratlos, was soll ich tun?
Ich habe auch als erste "if-Abfrage" if (document.images && parent.main)
und if (document.images) verwendet, bei beiden Varianten komm die gleich Meldung.Also mein Test-Script:
if (document.images && parent.main) // <-- soll ich das so lassen?
{
img1on = new Image();
img1on.src = "image1on.gif";img1off = new Image();
img1off.src = "image1off.gif";img1info = new Image();
img1info.src = "image1info.gif";
}function imgOn(imgName)
{
if (document.images)
{
document.images[imgName].src = eval(imgName + "on.src");
document.images["holder"].src = eval(imgName + "info.src");
if (parent.main)
parent.main.document.images["holder"].src = eval(imgName + "info.src");
}
}function imgOff(imgName)
{
if (document.images)
{
document.images[imgName].src = eval(imgName + "off.src");
document.images["holder"].src = "clear.gif";
if (parent.main)
parent.main.document.images["holder"].src = "clear.gif";
}
}Viele Grüsse
Thomas N == Neu-User-
Hallo,
if (document.images && parent.main) // <-- soll ich das so lassen?
{
img1on = new Image();
img1on.src = "image1on.gif";img1off = new Image();
img1off.src = "image1off.gif";img1info = new Image();
img1info.src = "image1info.gif";
}Die Abfrage ist heir nicht notwenig, kannst du rausnehmen.
Wie sieht denn deine Framestruktur aus?
Kannst du mir mal das Frameset zeigen, das erklärt vielleicht einiges.Gruß
ueps
-
Hallo,
Wie sieht denn deine Framestruktur aus?
Kannst du mir mal das Frameset zeigen, das erklärt vielleicht einiges.<frameset rows="220,*" border="1" frameborder="1" framespacing="0">
<frame src="rollOverF.htm" name="head" noresize scrolling="no">
<frame src="bodyF.htm" name="main" scrolling="yes" marginheight="0">
</frameset>Also ich dachte, dass es vielleicht damit zusammenhängt, dass durch das Frameset, die RollOver-Grafik ja nicht verschwindet, wenn man den Link drückt, wie das ja normal der Fall ist, weil die aufgerufene Seite im anderen Frame erscheint und somit unter der Maus die RollOver-Grafik bleibt und nach dem Aktivieren des Link ein mouseOver stattfindet?
Viele Grüsse
Thomas N == Neu-User-
Hi,
- mit "&&" funktioniert zwar der Link, aber kein Bild wechselt.
- mit "||" wechselt kein Bild aber der Link funktioniert.
Das ist mir jetzt erst näher aufgefallen, ist irgendwie sinnlos die
Behauptung, da ja der Link immer funktioniert und das Bild nie ;-)Also mittlwereile weiß ich auch nicht mehr so richtig wo das Problem liegt, da du irgendwelche Bildwechsel über mehrere Frames hinweg machen willst. Ist dein Versuch online, in Aktion wird mir eher klar was da genau nicht stimmen soll. rein vom Syntax her its der JS Code fehlerfrei.
Gruß
ueps
-
Hi,
- mit "&&" funktioniert zwar der Link, aber kein Bild wechselt.
- mit "||" wechselt kein Bild aber der Link funktioniert.
Das ist mir jetzt erst näher aufgefallen, ist irgendwie sinnlos die
Behauptung, da ja der Link immer funktioniert und das Bild nie ;-)Ist dein Versuch online?
Hier: http://www.ablage.com/1/frames/neu/
Online gehen die mouseOvers nicht bei:
NS 4.x (der macht aber auch offline Zicken!)
IE5.5 (offline gehts)NS 6.1 ist der Bildwechsel total langsam (online) (offline gehts gut).
Habe es nur mit WIN95 getestet.JavaScript-Fehler gibt es jetzt gar keine mehr?
Fühl mich grad voll DAU!Viele Grüsse
Thomas N == Neu-User-
Hallo,
also bei mir funktioniert das ganze prima.
Win2000 und IE 5Der einzige Fehler der auftaucht, ist das bei klick auf das obere Bild im head Frame eine neue Seite kommt, die hat dann das Bild "holder" nimmer und da meckert der Browser.
also noch folgene Abfrage reinbauen die prüft ob holder da ist:
function imgOn(imgName)
{
if (document.images)
{
document.images[imgName].src = eval(imgName + "on.src");
document.images["holder"].src = eval(imgName + "info.src");
if (parent.main.document.images["holder"])
parent.main.document.images["holder"].src = eval(imgName + "info.src");
}
}
function imgOff(imgName)
{
if (document.images)
{
document.images[imgName].src = eval(imgName + "off.src");
document.images["holder"].src = "clear.gif";
if (parent.main.document.images["holder"])
parent.main.document.images["holder"].src = "clear.gif";
}
}So die anderen Fehler könnten am eval(...) liegen.
Schreib dir doch ein array:imgs["img1"]["on"] = "image1on.gif";
imgs["img1"]["off"] = "image1off.gif";
imgs["img1"]["info"] = "image1info.gif";in der Funktion kannst dann statt eval(....) mit
imgs[imgName]["on"] die jeweilige Bildquelle setzen;Gruß
ueps
-
-
-
-
-
-
-
-
-
-
-
-
-