Carsti: Onmouseover mit animierten Gifs - die Zweite!

SELF-Forum

Onmouseover mit animierten Gifs - die Zweite!

Carsti
– Informationen zu den Bewertungsregeln

Tach auch!

Das hat man nun davon, wenn man sich eine persönliche Javascript-Biblio anlegt und denkt, man könnte C&P damit machen *lamentier*

Ich habe seit Monaten ein Javascript, um Buttons zu dynamisieren, hat auch immer geklappt (NN3/4, IE4/5). Bei meinem Versuch, das mit animierten Gifs zu machen, scheitere ich aber kläglich.
Bevor jetzt der Verweis zu "Javascript-Notizen" folgt, bitte weiterlesen *g*

Die Symptome sind die gleichen wie bei den "Javascript-Notizen", aber die Kur funzt nicht. Bei dem untenstehenden Listing habe ich das Problem, daß es im IE funktioniert, im NN nicht. Und das versionsübergreifend.

Kurze Erklärung: eine Maus wird als nicht animiertes Gif dargestellt, bei onmouseover wird das Gif durch ein animiertes ersetzt, welches die Maus weglaufen läßt.

Ich habe jetzt schon mein Javascript ersetzt durch das aus den "Javascript-Notizen", habe alles drumherum rausgeschmissen, es will nicht.

Hier das Listing:

<HTML>
<HEAD>
</HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- hide
function mauslauf ()
{
   if (document.images)
   { document.mausi.src="img/maus1.gif"; }
}

// -->
</SCRIPT>
<BODY>
<IMG SRC="img/mou2nani.gif" NAME="mausi" OnMouseOver="mauslauf()">
</BODY>
</HTML>

Und jetzt *bettel* die Frage: Warum funzt das im NN nicht?

Danke,

Carsti

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Onmouseover mit animierten Gifs - die Zweite!

    Sandy
    – Informationen zu den Bewertungsregeln

    Hallo Carsti...

    Ich hatte so ein aehnliches problem mit einem button der sich onmouseover drehen soll... also bei mir geht es jetzt.
    Es lag auch nur daran, dass ich das image pregeloaded hatte... hilft dir das vielleicht in irgendeiner weise?

    viele Gruesse,
    SAndy

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Habe ich den pre-ge-loadet?

      Carsti
      – Informationen zu den Bewertungsregeln

      Hallo SAndy,

      Ich hatte so ein aehnliches problem mit einem button der sich onmouseover drehen soll... also bei mir geht es jetzt.
      Es lag auch nur daran, dass ich das image pregeloaded hatte... hilft dir das vielleicht in irgendeiner weise?

      Ich habe den Eindruck, ich habe nie begriffen, was ein Preload ist :-)
      Meiner Ansicht nach ist das

      knopfan2 = new Image; knopfan2.src = "img/maus2.gif";

      sowas habe ich rausgenommen...
      Ich lasse mich da gerne belehren,

      Danke,

      Carsti

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Habe ich den pre-ge-loadet?

        Sandy
        – Informationen zu den Bewertungsregeln

        Hmmm....

        Tjo... wenn es das nicht ist, dann kann ich dir leider auch nicht weiterhelfen, so gern ich auch wuerde...:(
        Es gibt halt immernoch so unloesbare Mysterien, die niemand richtig begreift, geschweigedenn loesen kann.

        Ich hoffe jemand anders kann dir weiter helfen.

        Schoenen Tach noch bei diesem Superwetter..
        Sandy

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Dito!

          Carsti
          – Informationen zu den Bewertungsregeln

          Jau, wünsche ich auch!

          CU,

          Carsti

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. Onmouseover mit animierten Gifs - die Zweite!

    Frank Sons
    – Informationen zu den Bewertungsregeln

    Hallo Carsti!

    Könnte es eventuell daran liegen, das du kein neues Garfikobjekt unter Javascript angelegt hast? Ich habe noch nie mit animierten gifs gearbeitet, aber schau mal unter <../../tecbbe.htm> nach, eventuell findest du das etwas, das dir hilft.

    Da findest du dieses:

    mausneu = new image;
    mausneu.src = "img/maus1.gif";
    document.mausi.src = mausneu.src;

    Vielleicht hilft das dann ja.

    cu starside
    Frank

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Onmouseover mit animierten Gifs - die Zweite!

    Ingo Kühn
    – Informationen zu den Bewertungsregeln

    Hallo Carsti
    mit folgendem gehts unter Netscape4
    <BODY>
    <a href="dummy.html" OnMouseOver="mauslauf()><IMG SRC="img/mou2nani.gif" NAME="mausi">
    </BODY>

    Das href muß drin sein!

    Gruß Ingo

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Onmouseover mit animierten Gifs - die Zweite!

      Carsti
      – Informationen zu den Bewertungsregeln

      Klasse!

      Danke, hat geklappt!

      CU,

      Carsti

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Hat doch nicht geklappt :-(

        Carsti
        – Informationen zu den Bewertungsregeln

        Klasse!

        Danke, hat geklappt!

        CU,

        Carsti

        Mist!

        Falscher Browser! Hat immer noch nicht geklappt!

        Hülfäää!

        Carsti

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Jetzt klappt es wirklich! Danke!

      Carsti
      – Informationen zu den Bewertungsregeln

      Hallo Ingo,

      ab und zu ist man doch zu doof, war mein Fehler. Jetzt klappt es wirklich.

      Vielen Dank,

      Carsti

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  4. Onmouseover mit animierten Gifs - die Zweite!

    Wowbagger
    – Informationen zu den Bewertungsregeln

    Hi Carsti,

    Ich habe seit Monaten ein Javascript, um Buttons zu dynamisieren, hat auch immer geklappt (NN3/4, IE4/5). Bei meinem Versuch, das mit animierten Gifs zu machen, scheitere ich aber kläglich.

    der NN hat versch. probleme was animGIFs angeht (besonders bei GIFs *ohne* loop. Ich habe mich damit 'mal vor längerem herumärgern müssen, herausgekommen ist folgendes listing. Es basiert auf einzelnen bildern, die dann intern als animationssequenzen verwaltet werden. Der nachteil sind natürlich die vielen anfragen, die an den server rausgehen um all die schönen bilderchen vorzuladen (gib mir 'n bild, gib' mir noch'n bild, und noch eins, nun mach' schon, fütter' mich! :-)), der vorteil liegt aber eindeutig in der flexibilität.
    Die ursprüngliche idee stammt übrigens von der pangenialen site http://www.irt.org, wo man sich einiges an artikeln und FAQs downloaden kann - quasi als nachschlagewerk. Dort ist das listing (in ähnlicher form zumindest, ich hab's noch ein wenig verunstaltet) kommentiert - wühl dich 'mal durch, mir ist leider der artikelname entfallen...

    ich hoffe das hilft dir ein wenig - ich weis, es gibt einfachere 'workarounds' - aber nach meiner erfahrung haben die auch so ihre tücken, da der NN- wie gesagt -mit animGIFs nicht gut kann...

    so long...
    /*,*/
    Wowbagger

    ----- >=8 --- FADER.HTM ------------------------------

    <script language="JavaScript" src="fader.js" type="text/javascript"></script>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Images-Fade-Test</title>
    </head>

    <body onLoad="img_preload('1dot1', 1, 1, 200, 'images/0.gif');
    img_preload('1dot1', 1, 2, 150, 'images/1.gif');
    img_preload('1dot1', 1, 3, 100, 'images/2.gif');
    img_preload('1dot1', 1, 4, 50, 'images/3.gif');
    img_preload('1dot1', 1, 5, 25, 'images/4.gif');
    img_preload('1dot1', 1, 5, 0, '_stop');
    img_preload('1dot1', 2, 1, 250, 'images/4.gif');
    img_preload('1dot1', 2, 2, 500, 'images/3.gif');
    img_preload('1dot1', 2, 3, 1000, 'images/2.gif');
    img_preload('1dot1', 2, 4, 1500, 'images/1.gif');
    img_preload('1dot1', 2, 5, 2000, 'images/0.gif');
    img_preload('1dot1', 2, 5, 0, '_stop');

    img_preload('2dot2', 1, 1, 100, 'images/0.gif');
    img_preload('2dot2', 1, 2, 100, 'images/1.gif');
    img_preload('2dot2', 1, 3, 100, 'images/2.gif');
    img_preload('2dot2', 1, 4, 100, 'images/3.gif');
    img_preload('2dot2', 1, 5, 100, 'images/4.gif');
    img_preload('2dot2', 1, 5, 0, '_stop');
    img_preload('2dot2', 2, 1, 100, 'images/4.gif');
    img_preload('2dot2', 2, 2, 100, 'images/3.gif');
    img_preload('2dot2', 2, 3, 100, 'images/2.gif');
    img_preload('2dot2', 2, 4, 100, 'images/1.gif');
    img_preload('2dot2', 2, 5, 100, 'images/0.gif');
    img_preload('2dot2', 2, 5, 0, '_stop');

    img_preload('3dot3', 1, 1, 300, 'images/0.gif');
    img_preload('3dot3', 1, 2, 250, 'images/1.gif');
    img_preload('3dot3', 1, 3, 200, 'images/2.gif');
    img_preload('3dot3', 1, 4, 150, 'images/3.gif');
    img_preload('3dot3', 1, 5, 125, 'images/4.gif');
    img_preload('3dot3', 1, 5, 0, '_stop');
    img_preload('3dot3', 2, 1, 125, 'images/4.gif');
    img_preload('3dot3', 2, 2, 150, 'images/3.gif');
    img_preload('3dot3', 2, 3, 200, 'images/2.gif');
    img_preload('3dot3', 2, 4, 250, 'images/1.gif');
    img_preload('3dot3', 2, 5, 300, 'images/0.gif');
    img_preload('3dot3', 2, 5, 0, '_stop')">

    <A HREF="" Target=""
       onMouseover="img_in('1dot1', '1dot1', 'hallo Welt!')"
       onMouseout="img_out('1dot1', '1dot1')">
    <IMG name="1dot1" SRC="images/0.gif" width="21" height="21" BORDER="0" ALT="">
    </A>
    <br>
    <A HREF="" Target=""
       onMouseover="img_in('2dot2', '2dot2', 'hallo Welt!')"
       onMouseout="img_out('2dot2', '2dot2')">
    <IMG name="2dot2" SRC="images/0.gif" width="21" height="21" BORDER="0" ALT="">
    </A>
    <br>
    <A HREF="" Target=""
       onMouseover="img_in('test', '3dot3', 'hallo Welt!')"
       onMouseout="img_out('test', '3dot3')">
    <IMG name="3dot3" SRC="images/0.gif" width="21" height="21" BORDER="0" ALT="">
    </A>

    <br><br>
    <img name="test" src="images/palette.gif" border="0" alt="">

    </body>
    </html>

    ----- >=8 --- FADER.JS ------------------------------

    browserName= navigator.appName;  
    browserVer= parseInt(navigator.appVersion);  
    if (browserName == "Netscape" && browserVer >= 3) version= "3";
    else version= "other";
    var img= new Array(), inphase= new Array(), outphase= new Array(), InTimer= new Array(), OutTimer= new Array(), InTimeout= new Array(), OutTimeout= new Array(), obj_count= 0, oldname, pcount= 0;

    function img_preload(name, fade, phase, ms, src)
    {
    if (version >= "3")
    {
    if (name!=oldname)
    {
    obj_count++;
    img[obj_count]= new Array();
    img[obj_count][0]= new Array();
    img[obj_count][1]= new Array();
    img[obj_count][2]= new Array();
    img[obj_count][0][0]= name;
    }
    if (src != "_stop")
    {
      img[obj_count][fade][phase]= new Image();
      img[obj_count][fade][phase].src= src;
      img[obj_count][fade][phase][0]= ms;
    } else
    {
      img[obj_count][fade][0]= phase;
      if (fade==2)
      {
       pcount++; inphase[pcount]= 1; outphase[pcount]= 1;
       InTimer[pcount]=0; OutTimer[pcount]=0; InTimeout[pcount]=0; OutTimeout[pcount]=0;
      }
    }
    oldname=name;
    }
    }

    function img_in(tarname, name, text)
    {
    if (version >= "3")
    {
    for (i=1; i<=obj_count; i++)
      {if (name==img[i][0][0]) target=i;}
    inphase[parseInt(name)]++;
    if (OutTimer[parseInt(name)]) clearTimeout(OutTimeout[parseInt(name)]);
    if (name==tarname)
      {document.images[img[target][0][0]].src= img[target][1][inphase[parseInt(name)]].src;}
    else eval("document."+tarname+".src= img[target][1][inphase[parseInt(name)]].src;");
    InTimer[parseInt(name)]= true;  
    if (inphase[parseInt(name)]<img[target][1][0])
    {
      if (text) funcstring= "img_in('"+tarname+"','"+name+"','"+text+"')";
       else funcstring= "img_in('"+tarname+"','"+name+"')"
      InTimeout[parseInt(name)]= setTimeout(funcstring, img[target][1][inphase[parseInt(name)]-1][0]);
    } else
    {
      InTimer[parseInt(name)]= false;
      inphase[parseInt(name)]= 1;
    }
    }
    window.status= text;
    }

    function img_out(tarname, name)
    {
    if (version >= "3")
    {
    for (i=1; i<=obj_count; i++)
      {if (name==img[i][0][0]) target=i;}
    outphase[parseInt(name)]++;
    if (InTimer[parseInt(name)]) clearTimeout(InTimeout[parseInt(name)]);
    if (name==tarname)
      {document.images[img[target][0][0]].src= img[target][2][outphase[parseInt(name)]].src;}
    else eval("document."+tarname+".src= img[target][2][outphase[parseInt(name)]].src;");
    OutTimer[parseInt(name)]= true;  
    if (outphase[parseInt(name)]<img[target][2][0])
    {
      funcstring= "img_out('"+tarname+"','"+name+"')"
      OutTimeout[parseInt(name)]= setTimeout(funcstring, img[target][2][outphase[parseInt(name)]-1][0]);
    } else
    {
      OutTimer[parseInt(name)]= false;
      outphase[parseInt(name)]= 1;
    }
    }
    window.status= "";
    }

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Oh, wow!

      Carsti
      – Informationen zu den Bewertungsregeln

      Tach auch!

      Ich werde mal in einer ruhigen Stunde draufsehen!

      Danke,

      Carsti

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln