Kai v.L.: verbinden von funktionen mit eventhandlern

SELF-Forum

verbinden von funktionen mit eventhandlern

Kai v.L.
– Informationen zu den Bewertungsregeln

hallo leute,
ich bin noch anfängerund habe das prob, daß ich mir selber ein paar buttons gemacht habe und jetzt will, daß sie einen onmouseover effekt haben. das allein ist kein problem, doch sie sollen bei onclick "gedrückt" werden, sprich eine andere grafik soll aufgerufen werden und danach soll aber die alte, sprich höhere, grafik wieder aufgerufen werden also ein klickeffekt entstehen.auch das alleine bekomme ich hin, nur die beiden effekte zu verbinden und dann noch gleichzeitig einen link darauf zu legen schaffe ich nicht.
wer kann mir helfen?

hier mein bisheriger code:
<script language="JavaScript">

var inaktiv="bild1";

function Wechsel(bildname,zustand)
{
if (inaktiv!=bildname)
  {
  if (zustand==1) document[bildname].src =bildname+"over.gif"; /*Zustand beim OnMouseOver*/

if (zustand==2) document[bildname].src =bildname+"out.gif";  /*Zustand nach OnMouseOut*/
  if (zustand==3) {
           /*Zustand nach OnClick*/
     document[bildname].src = bildname+"click.gif";
     inaktiv=bildname; }
  }

return true; }

</script>

<script language="JavaScript1.1">
<!-- vor alten Browsern verstecken

// Anwender benutzt einen JS 1.1 Browser!
  browserOK = true;

bild= new Array(); // Array fuer Bilder erzeugen

//Hier werden die Bilder in den Speicher geladen:
  bild[1] = new Image();
  bild[1].src = "but1out.gif";
  bild[2] = new Image();
  bild[2].src = "but1click.gif";
  bild[3] = new Image();
  bild[3].src = "but1over.gif";
  bild[4] = new Image();
  bild[4].src = "../buttons/but2out.gif";
  bild[5] = new Image();
  bild[5].src = "../buttons/but2click.gif";
  bild[6] = new Image();
  bild[6].src = "../buttons/but2over.gif";
  bild[7] = new Image();
  bild[7].src = "../buttons/but3out.gif";
  bild[8] = new Image();
  bild[8].src = "../buttons/but3click.gif";
  bild[9] = new Image();
  bild[9].src = "../buttons/but3over.gif";

// -->
</script>
<script language="JavaScript">
<!-- vor alten Browsern verstecken

var AnAus = false; // Zustand des Schalters am Anfang

function schalten(name) {
  if (browserOK) {
    document.but1.src = bild[2].src;
    AnAus = !(AnAus); // an oder aus schalten
    
    setTimeout("normal()", 100);
  }
}
function normal() {
  if (browserOK) {    
    document.schalter.src = bild[1].src;
  }
}
</head><body>

<a href="datei1.htm" target="main" onMouseOver="Wechsel('but1',1);"
onMouseOut="Wechsel('but1',2);" onClick="schalten()">
<img src="but1out.gif" name="but1" border="0" width="120" height="30"
alt="Datei1"></a>

wie kann ich außerdem die schalten() funktion so umschreiben, daß sie für mehrere buttons funktioniert?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. verbinden von funktionen mit eventhandlern

    Götz
    – Informationen zu den Bewertungsregeln

    Hi Kai!

    *sorry* ich kann dir leider nicht helfen, aber ich geb dir für die Zukunft nen kleinen Tip:
    Das nächste mal, stell doch ne Beispielsite online, und poste nicht den ganzen Code ... man muß die forumsdaten ja nicht unnötig "aufblasen" ... ;-)

    MfG
    Götz

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. verbinden von funktionen mit eventhandlern

      Kess
      – Informationen zu den Bewertungsregeln

      Hallo Götz,

      *sorry* ich kann dir leider nicht helfen,

      Dann schweige besser.

      aber ich geb dir für die Zukunft nen kleinen Tip:
      Das nächste mal, stell doch ne Beispielsite online, und poste nicht den ganzen Code ... man muß die forumsdaten ja nicht unnötig "aufblasen" ... ;-)

      Ein völlig unnötiger und noch dazu falscher Tip. Es bleibt dem Autor überlassen, ob er Code hier postet oder eine Beispiel URL nennt.
      Es kann viel Gründe geben, auch triftige, warum keine URL genannt wird. Wenn Kai hier unnützen Code gepostet hätte, wärew deine Bemerkung berechtigt gewesen. Er hat jedoch auschließlich den relevanten Code gepostet. Den Anschiß hat nicht er sich verdient, sondern du.

      Kai, zu deiner Frage:
      Du hast bei der Funtion schalten den Parameter Name vorgesehen, nutzt ihn aber nicht. Ich nehme an, damit willst du den Bttton-namen übergeben. Das kannst du genauso wie in der Funktion Wechsel halten, dann funktioniert schalten auch für mehrere Buttons. Die Funktion normal mußt du natürlich genauso aufbauen.
      Also immer document[name].src ... verwenden.

      Zu deinem ersten Problem:
      Achte mal genau darauf, was geschieht:
      Zunächst wird but1out.gif angezeigt.
      Dann bewegst du die Maus über den Button. Die Funktion Wechsel zeigt nun but1over.gif an.
      Du klickst auf den Button. Die Funktion schalten zeigt but1click.gif an.
      Nach 100 millisekunden wird die Funktion normal aufgerufen, die nicht dem button but1 sondern dem button schalter das bild bit1out.gif zuweist, also einen völlig anderen Button.

      Bist du sicher, daß du in der Funktion mormal nicht but1 ansprechen möchtest.
      Und wenn du das tust, wird wieder die Grafik but1out.gif angezeigt, obwohl sich die Maus durch den Klick noch immer über dem Button befindet. Meinst du nichte eher but1over.gif in der funktion normal?

      Viele Gruesse
        Kess

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. verbinden von funktionen mit eventhandlern

        kai
        – Informationen zu den Bewertungsregeln

        Bist du sicher, daß du in der Funktion mormal nicht but1 ansprechen möchtest.
        Und wenn du das tust, wird wieder die Grafik but1out.gif angezeigt, obwohl sich die Maus durch den Klick noch immer über dem Button befindet. Meinst du nichte eher but1over.gif in der funktion normal?

        Viele Gruesse
          Kess

        vielen dank kess.
        hier mal mein verbesserter code, doch ich verstehe nicht, wie ich die schalten() function umschreiben bzw. die parameter  übergeben soll?

        <script language="JavaScript">

        var inaktiv="bild1";

        function Wechsel(bildname,zustand)
        {
        if (inaktiv!=bildname)
          {
          if (zustand==1) document[bildname].src =bildname+"over.gif"; /*Zustand beim OnMouseOver*/

        if (zustand==2) document[bildname].src =bildname+"out.gif";  /*Zustand nach OnMouseOut*/
          if (zustand==3) {
                   /*Zustand nach OnClick*/
             document[bildname].src = bildname+"click.gif";
             inaktiv=bildname; }
          }

        return true; }

        </script>

        <script language="JavaScript1.1">
        <!-- vor alten Browsern verstecken

        // Anwender benutzt einen JS 1.1 Browser!
          browserOK = true;

        bild= new Array(); // Array fuer Bilder erzeugen

        //Hier werden die Bilder in den Speicher geladen:
          bild[1] = new Image();
          bild[1].src = "but1out.gif";
          bild[2] = new Image();
          bild[2].src = "but1click.gif";
          bild[3] = new Image();
          bild[3].src = "but1over.gif";
          bild[4] = new Image();
          bild[4].src = "but2out.gif";
          bild[5] = new Image();
          bild[5].src = "but2click.gif";
          bild[6] = new Image();
          bild[6].src = "but2over.gif";
          bild[7] = new Image();
          bild[7].src = "but3out.gif";
          bild[8] = new Image();
          bild[8].src = "but3click.gif";
          bild[9] = new Image();
          bild[9].src = "but3over.gif";

        // -->
        </script>
        <script language="JavaScript">
        <!-- vor alten Browsern verstecken

        var AnAus = false; // Zustand des Schalters am Anfang

        function schalten(name) {
          if (browserOK) {
            document.name.src = bild[2].src;
            AnAus = !(AnAus); // an oder aus schalten
            
            setTimeout("normal()", 200);
          }
        }
        function normal() {
          if (browserOK) {    
            document.name.src = bild[3].src;
            
          }
        }

        <body>

        <a href="datei1.htm" target="main" onMouseOver="Wechsel('but1',1);"
        onMouseOut="Wechsel('but1',2);" onClick="schalten('but1')">
        <img src="but1out.gif" name="but1" border="0" width="120" height="30"
        alt="Datei1"></a></body>

        gruß
        Kai

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. verbinden von funktionen mit eventhandlern

          Kess
          – Informationen zu den Bewertungsregeln

          hier mal mein verbesserter code, doch ich verstehe nicht, wie ich die schalten() function umschreiben bzw. die parameter  übergeben soll?
          function schalten(name) {
            if (browserOK) {
              document.name.src = bild[2].src;
              AnAus = !(AnAus); // an oder aus schalten
              
              setTimeout("normal()", 200);
            }
          }
          function normal() {
            if (browserOK) {    
              document.name.src = bild[3].src;
              
            }
          }

          Nur eine Kleinigkeit stimmt hier nicht. Du willst ja nicht eine Grafik mit dem Namen 'name' ansprechen, sondern name ist eine Variable, die den Grafikname enthaelt.

          Tausche also document.name.src  gegen document[name].src aus.

          Weiterhin musst du der funktion normal natuerlich auch den inhalt von Name mitteilen. Du rufst normal also mit
            setTimeout("normal('" + name + "')", 200)
          auf. Die Funktion muss entsprechend mit
            function normal(name)
          definiert sein.

          Viele Gruesse
            Kess

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. verbinden von funktionen mit eventhandlern

            Kai.v.L
            – Informationen zu den Bewertungsregeln

            Nur eine Kleinigkeit stimmt hier nicht. Du willst ja nicht eine Grafik mit dem Namen 'name' ansprechen, sondern name ist eine Variable, die den Grafikname enthaelt.

            Tausche also document.name.src  gegen document[name].src aus.

            Weiterhin musst du der funktion normal natuerlich auch den inhalt von Name mitteilen. Du rufst normal also mit
              setTimeout("normal('" + name + "')", 200)
            auf. Die Funktion muss entsprechend mit
              function normal(name)
            definiert sein.

            Viele Gruesse
              Kess

            Kess, du bist ab heute mein ganz persönlicher gott!!
            seit tagen sitze ich  daran und versuche die sch..., endlich funktioniert es, nur wie gesagt, wenn ich es einbinden will, ist alles andere weg.

            oh großer gott Kess, kannst du mir noch einmal erscheinen und einen rat geben?

            *inverehrungwartender*
            Kai

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. verbinden von funktionen mit eventhandlern

              Kai v.L.
              – Informationen zu den Bewertungsregeln

              ach so,
              ich hab gerade festgestellt, daß nur die funktion schalten stört, ich weiss nur nicht warum. sobald ich die in eine html seite einbinden will, sieht diese im browser komplett weiss aus selbst die buttons sind nicht da.

              @ Kess
              das ist keine verarsche, du bist wirklich mein held!!! du bist der erste, der mir helfen kann und will. und ich sitz wirklich schon lange hier dran.

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. verbinden von funktionen mit eventhandlern

                Eckard
                – Informationen zu den Bewertungsregeln

                @ Kess du bist wirklich mein held!!! du bist der erste, der mir helfen kann und will. und ich sitz wirklich schon lange hier dran.

                Hallo Kai
                kleiner Tipp am Rande http://www.atomic-eggs.com/selfspezial/daten/9.html
                Gruß Eckard

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

      2. verbinden von funktionen mit eventhandlern

        Kai v. L.
        – Informationen zu den Bewertungsregeln

        und noch ein problem. wenn ich diesen teil (folgt) in meine homepage einbinden will - übrigens ist sie noch nicht online, aber das ist etwas anderes - wird auf einmal nur noch eine leere seite angezeigt, obwohl die buttons jetzt funktionieren( nochmals danke Kess ).
        ich werd hier noch wahnsinnig

        Gruß *verzweifelnder* Kai

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      3. verbinden von funktionen mit eventhandlern

        Kai v. L.
        – Informationen zu den Bewertungsregeln

        und noch ein problem. wenn ich diesen teil (folgt) in meine homepage einbinden will - übrigens ist sie noch nicht online, aber das ist etwas anderes - wird auf einmal nur noch eine leere seite angezeigt, obwohl die buttons jetzt funktionieren( nochmals danke Kess ).
        ich werd hier noch wahnsinnig

        Gruß *verzweifelnder* Kai

        <script language="JavaScript">
        <!-- vor alten Browsern verstecken

        var browserOK = false;

        // -->
        </script>
        <script language="JavaScript1.1">
        <!-- vor alten Browsern verstecken

        // Anwender benutzt einen JS 1.1 Browser!
          browserOK = true;

        bild= new Array(); // Array fuer Bilder erzeugen

        //Hier werden die Bilder in den Speicher geladen:
          bild[1] = new Image();
          bild[1].src = "but1out.gif";
          bild[2] = new Image();
          bild[2].src = "but1click.gif";
          bild[3] = new Image();
          bild[3].src = "but1over.gif";
          bild[4] = new Image();
          bild[4].src = "but2out.gif";
          bild[5] = new Image();
          bild[5].src = "but2click.gif";
          bild[6] = new Image();
          bild[6].src = "but2over.gif";
          bild[7] = new Image();
          bild[7].src = "but3out.gif";
          bild[8] = new Image();
          bild[8].src = "but3click.gif";
          bild[9] = new Image();
          bild[9].src = "but3over.gif";

        // -->
        </script>
        <script language="JavaScript">
        <!-- vor alten Browsern verstecken

        var AnAus = false; // Zustand des Schalters am Anfang

        function schalten(name) {
          if (browserOK) {
            document[name].src = bild[2].src;
            AnAus = !(AnAus); // an oder aus schalten
            
            setTimeout("normal()", 200);
          }
        }
        function normal() {
          if (browserOK) {    
            document[name].src = bild[3].src;
            
          }
        }
        </script>

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln