nicht angemeldet
onmouseover/out/click mit nur 2 Grafiken
Hi,
ich bin beim servern über ein tolles JavaScript gestolpert. Das ursprüngliche Programm machte folgendes. Man hat 3 Buttons. Beim drüberfahren mit der Maus erscheint Button2 und beim clicken Button3. Buttons bleibt dann so lange aktiviert, bis man auf einen anderen Button klickt. Beispiel findet ihr unter : http://screenexa.net/js_notiz/tips/change.htm
So, so weit so gut. Da mein Provi eh nicht der aller schnellste ist, dachte ich mir, für was brauch in 3 Buttons. Es reicht ein "inaktiver" Button und ein Button für mouseover UND onclick.
Das sollte dann so aussehen. "inakt" Button wird geladen. Wenn man mit der Maus drüber fährt wird Button2 angezeigt und bei draufklicken bleibt der Button2 stehen.
Ich wollt das so machen:
Zur weiteren Erklärung. "inakt"Button ist hier grün.gif und Button2 ist hier rot.gif
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
// Bilder vorladen
if (document.images)
{
gruenImage = new Image()
gruenImage.src = "gruen.gif"
rotImage = new Image()
rotImage.src = "rot.gif"
}
// Statustext anzeigen, Button rot
function statusein(Bild,text)
{
window.status = text;
if (document.images)
{
if (Bild.src == gruenImage.src)
Bild.src = rotImage.src;
}
}
// Statustext aus, Button gruen
function statusaus(Bild)
{
window.status="";
if (document.images)
{
if (Bild.src == rotImage.src)
Bild.src = gruenImage.src;
}
}
// aktuellen Link kennzeichnen
// dazu alle Buttons gruen, dann
// Button gewaehlter Link rot
function gewaehlt(Bild)
{
if (document.images)
{
for (i=0; i<document.images.length; i++)
document.images[i].src = gruenImage.src;
Bild.src = rotImage.src;
}
}
// -->
</SCRIPT>
<BODY BGCOLOR="#000000" TEXT="#C0C0C0" LINK="#00FFFF" VLINK="#FFFFFF" ALINK="#6666FF">
<TABLE CELLSPACING=4 CELLPADDING=0 BORDER=0>
<TR>
<TD>
<A HREF="unterlink.html" TARGET="anzeige" onmouseover = "statusein(document.Bild1,'Seite 1'); return true" onmouseout="statusaus(document.Bild1)" onclick="gewaehlt(document.Bild1)">
<IMG SRC="gruen.gif" NAME="Bild1" BORDER=0></A>
</TD>
<TD>
</TD>
</TR>
<TR>
<TD>
<A HREF="unterlink.html" TARGET="anzeige" onmouseover = "statusein(document.Bild2,'Seite 2'); return true" onmouseout="statusaus(document.Bild2)" onclick="gewaehlt(document.Bild2)">
<IMG SRC="gruen.gif" NAME="Bild2" BORDER=0></A>
</TD>
<TD>
<TR>
<TD>
</TD>
<TD>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Was ich noch sagen wollte, von JavaScript verstehe ich leider nichts.
Wer kann mir da weiter helfen??? Wie es NICHT geht, könnt ihr hier sehen http://134.2.52.70/viktor/test/
Gruß
Viktor
-
Moin Viktor,
So, so weit so gut. Da mein Provi eh nicht der aller schnellste ist,
das ist wohl die Untertreibung des Jahres! Ich jedenfalls mußte _sehr_ lange auf den Seitenaufbau warten...
// aktuellen Link kennzeichnen
// dazu alle Buttons gruen, dann
// Button gewaehlter Link rotfunction gewaehlt(Bild)
{
if (document.images)
{
for (i=0; i<document.images.length; i++)
document.images[i].src = gruenImage.src;
Bild.src = rotImage.src;
}
}So ist es richtig, im Quelltext von http://134.2.52.70/viktor/test/ steht aber:
// aktuellen Link kennzeichnen
// dazu alle Buttons rot, dann
// Button gewaehlter Link rotfunction gewaehlt(Bild)
{
if (document.images)
{
for (i=0; i<document.images.length; i++)
document.images[i].src = rotImage.src;
Bild.src = rotImage.src;
}
}Dadurch werden, wie Du ja selbst im Kommentar erwähnst, _alle_ Buttons rot, was ja wohl nicht Sinn der Sache ist! Bei Deinem Script wird natürlich durch onmouseout="statusaus(document.Bild2)" auch der gewählte Link wieder grün angezeigt, sobald die Maus bewegt wird. Um das zu verhindern, müsstest Du noch ein Variable einfügen, in der gespeichert wird, welcher Button gerade gerade gewählt ist und diese Variable statt if (Bild.src == ...) in StatusEin und StatusAus abfragen.
Das Ganze wird dann aber wohl doch etwas unübersichtlich, da dann jeweils _zwei_ Buttons rot sein können, nämlich der gerade gewählte und der über dem der Mauszeiger steht. Bei so kleinen Grafiken, wie Du sie verwendest, würde ich Dir empfehlen, doch lieber drei Grafiken zu benutzen!
Wenn Du die Bilder auf mehreren Seiten benutzt, befinden sie sich sowieso durch das Vorladen auf der Einstiegsseite schon im Browser-Cache und verursachen so keine weitere Ladezeit (selbst bei einem sooo langsamen Provider wie Deinem ;-)
Gruß
Dirk-
Moin Viktor,
So, so weit so gut. Da mein Provi eh nicht der aller schnellste ist,
das ist wohl die Untertreibung des Jahres! Ich jedenfalls mußte _sehr_ lange auf den Seitenaufbau warten...
Hmmmmmm, der Testserver ist NICHT mein Provi, sondern ist direkt am UNI-Netz. Mein Provi ist web-art. Dort liegt auch meine Seite. Die Irix hier hab ich nur zum rumwurschteln.
// aktuellen Link kennzeichnen
// dazu alle Buttons gruen, dann
// Button gewaehlter Link rotfunction gewaehlt(Bild)
{
if (document.images)
{
for (i=0; i<document.images.length; i++)
document.images[i].src = gruenImage.src;
Bild.src = rotImage.src;
}
}Hab es schon geändert, aber geht immer noch nicht. Das war nur ein uploadfehler von mir :o) Diese Variante hab ich aber auch schon mal versucht, ohne Erfolg. Der rote Button bleibt einfach nicht aktiviert, wenn man draufklickt. Er wird gleich wieder grün. HIIIIIIIIIIIILFE
Dadurch werden, wie Du ja selbst im Kommentar erwähnst, _alle_ Buttons rot, was ja wohl nicht Sinn der Sache ist! Bei Deinem Script wird natürlich durch onmouseout="statusaus(document.Bild2)" auch der gewählte Link wieder grün angezeigt, sobald die Maus bewegt wird. Um das zu verhindern, müsstest Du noch ein Variable einfügen, in der gespeichert wird, welcher Button gerade gerade gewählt ist und diese Variable statt if (Bild.src == ...) in StatusEin und StatusAus abfragen.
Oha, was mich halt wundert, das das Teil mit 3 Butttons geht. Der Vorschlag von Dir hört sich zwar gut an, aber da ich von JavaScript keine Ahnung habe, kann ich damit leider nicht viel damit anfangen.
Das Ganze wird dann aber wohl doch etwas unübersichtlich, da dann jeweils _zwei_ Buttons rot sein können, nämlich der gerade gewählte und der über dem der Mauszeiger steht. Bei so kleinen Grafiken, wie Du sie verwendest, würde ich Dir empfehlen, doch lieber drei Grafiken zu benutzen!
Das ist ja nur ein Test. Ich möchte dieses Script natürlich mit beschrifteten Buttons benutzen, wobei z.B. bei dem aktivierte Button dann..... was weiß ich..... die Schrift größer ist oder gelb oder geflochten mit einer Laufmasche :o) Mir gehts erst mal um das Script, wie ich das dann einsetze, das ist noch in meinem Kopf. Solange das Teil nicht geht, bastell ich auch nicht an meiner Seite rum.......... erst nächste Woche dann, da hab ich Urlaub. *freu*
Nun????????? Haste nochmals eine Tipp????????
Gruß
Viktor
-
Moin Viktor,
Hmmmmmm, der Testserver ist NICHT mein Provi, sondern ist direkt am UNI-Netz.
Oh, dann wundert mich das Tempo...
Hab es schon geändert, aber geht immer noch nicht. Das war nur ein uploadfehler von mir :o) Diese Variante hab ich aber auch schon mal versucht, ohne Erfolg. Der rote Button bleibt einfach nicht aktiviert, wenn man draufklickt. Er wird gleich wieder grün.
Wie bereits gesagt:
»» Bei Deinem Script wird natürlich durch onmouseout="statusaus(document.Bild2)" auch der gewählte Link wieder grün angezeigt, sobald die Maus bewegt wird. Um das zu verhindern, müsstest Du noch eine Variable einfügen, in der gespeichert wird, welcher Button gerade gerade gewählt ist und diese Variable statt if (Bild.src == ...) in StatusEin und StatusAus abfragen.
Oha, was mich halt wundert, das das Teil mit 3 Butttons geht. Der Vorschlag von Dir hört sich zwar gut an, aber da ich von JavaScript keine Ahnung habe, kann ich damit leider nicht viel damit anfangen.
Das liegt eben daran, daß im dem Script bei onmouseout die Bedingung "if (Bild.src == rotImage.src)" abgefragt wird und eben diese Bedingung bei 3 Buttons _nicht_ erfüllt ist. Bei nur 2 Buttons dagegen trifft sie zu!
Eine einfache Lösung auf die Schnelle wäre die Funktionen statusaus und gewaehlt um einen Parameter BildNr zu erweitern und eine globale Variable aktivesBild einzufügen:
var aktivesBild = 0;
// Statustext anzeigen, Button rot
function statusein(Bild,text,BildNr)
{
window.status = text;
if (document.images)
Bild.src = rotImage.src;
}
/* Die zweite If-Abfrage ist bei zwei Buttons überflüssig */// Statustext aus, Button gruen
function statusaus(Bild,BildNr)
{
window.status="";
if (document.images)
if (BildNr != aktivesBild)
Bild.src = gruenImage.src;
}
/* Bild nur austauschen, wenn das Bild, das der Mauszeiger verläßt nicht das aktuell gewählte ist */// aktuellen Link kennzeichnen
// dazu alle Buttons gruen, dann
// Button gewaehlter Link rotfunction gewaehlt(Bild,BildNr)
{
if (document.images)
{
aktivesBild=BildNr;
for (i=0; i<document.images.length; i++)
document.images[i].src = gruenImage.src;
Bild.src = rotImage.src;
}
}Zusätzlich muß dieser Parameter dann in den Anker-Definitionen mit angegeben werden, also z.B.:
<a (...) onmouseout="statusaus(document.Bild1,1)" onclick="gewaehlt(document.Bild1,1)">
»» Solange das Teil nicht geht, bastell ich auch nicht an meiner Seite rum.......... erst nächste Woche dann, da hab ich Urlaub. *freu*
Na dann: schönen Urlaub!
Nun????????? Haste nochmals eine Tipp????????
Ich hoffe, ich konnte Dir helfen! (Das ganze ist nicht getestet, sondern nur schnell hingeschrieben.)
Gruß
Dirk-
Moin Viktor,
Moin???????? Jetzt isses 15 uhr *gg*
Erstmal ahoi Dirk :o)
Hmmmmmm, der Testserver ist NICHT mein Provi, sondern ist direkt am UNI-Netz.
Oh, dann wundert mich das Tempo...
An der Uni wundert mich gar nix mehr mit ihrem Schneckennetz und Gurkenhups (10Mbit/s).
»» Bei Deinem Script wird natürlich durch onmouseout="statusaus(document.Bild2)" auch der gewählte Link wieder grün angezeigt, sobald die Maus bewegt wird. Um das zu verhindern, müsstest Du noch eine Variable einfügen, in der gespeichert wird, welcher Button gerade gerade gewählt ist und diese Variable statt if (Bild.src == ...) in StatusEin und StatusAus abfragen.
Bist mir nicht böse, wenn ich da nur Bahnhof verstanden habe, aber wie gesagt, hab keine Ahnung von JC
var aktivesBild = 0;
// Statustext anzeigen, Button rot
function statusein(Bild,text,BildNr)
{
window.status = text;
if (document.images)
Bild.src = rotImage.src;
}
/* Die zweite If-Abfrage ist bei zwei Buttons überflüssig */// Statustext aus, Button gruen
function statusaus(Bild,BildNr)
{
window.status="";
if (document.images)
if (BildNr != aktivesBild)
Bild.src = gruenImage.src;
}
/* Bild nur austauschen, wenn das Bild, das der Mauszeiger verläßt nicht das aktuell gewählte ist */// aktuellen Link kennzeichnen
// dazu alle Buttons gruen, dann
// Button gewaehlter Link rotfunction gewaehlt(Bild,BildNr)
{
if (document.images)
{
aktivesBild=BildNr;
for (i=0; i<document.images.length; i++)
document.images[i].src = gruenImage.src;
Bild.src = rotImage.src;
}
}Zusätzlich muß dieser Parameter dann in den Anker-Definitionen mit angegeben werden, also z.B.:
<a (...) onmouseout="statusaus(document.Bild1,1)" onclick="gewaehlt(document.Bild1,1)">
Hmmmmmmm, hab es mal so gemacht. Jetzt hat der Button nur noch eine Farbe, und das ist grün. Ich wurschtel halt mal ein wenig herum. Wenn du noch ne Idee hast, dann haste beide Ohren von mir, ansonsten wünsch ich Dir ein schönes Osterfest :o) und mampf nicht so viel süßes ;o)
Ich hoffe, ich konnte Dir helfen! (Das ganze ist nicht getestet, sondern nur schnell hingeschrieben.)
*g* Kannst ja mal Dein Kunstwerk auf http://134.2.52.70/viktor/testneu/ begutachten.
Tschüssi
Viktor
-
Moin Viktor,
Moin???????? Jetzt isses 15 uhr *gg*
Ich wohne zwar in Bochum, aber laut meinen ostfriesischen Verwandten passt "Moin" oder "Moin moin" zu jeder Uhrzeit...
Bist mir nicht böse, wenn ich da nur Bahnhof verstanden habe, aber wie gesagt, hab keine Ahnung von JC
Böse bin ich Dir keineswegs, auch ich habe erst vor wenigen Monaten angefangen... Aber prinzipiell sollte man sich mit Sachen, die man benutzen will natürlich schon ein bißchen beschäftigen <g>
Du kannst Dir ja im Urlaub mal <../../te.htm> vornehmen! ;-))Hmmmmmmm, hab es mal so gemacht. Jetzt hat der Button nur noch eine Farbe, und das ist grün.
*g* Kannst ja mal Dein Kunstwerk auf http://134.2.52.70/viktor/testneu/ begutachten.
Hab ich gerade gemacht! Daß nur noch die Farbe grün zu sehen ist, dürfte an zwei Sachen liegen:
1. Du lädst die Bilder nicht mehr vor und definierst damit auch nicht mehr die Variablen gruenImage und rotImage
2. in den Verweisen fehlt jetzt das onmouseover="..."
Mit den beiden Änderungen sollte es eigentlich funktionieren!
Schöne Ostertage
Dirk
-
-
-
-
-
Hallo Viktor!
ich bin beim servern über ein tolles JavaScript gestolpert
http://screenexa.net/js_notiz/tips/change.htm
Schön, daß du die Seiten von Christine Kühnel "entdeckt" hast. Sie ist eine wirkliche Kapazität auf dem Gebiet von JavaScript (hallo Christine, falls du da mit liest ;-) )und viele von den Forumsteilnehmer kennen und schätzen ihre Seiten/Tips.
Etwas in der Richtung was du möchtest findest du auch unter:
http://www.webreference.com/dhtml/column2/Grüße
Thomas