nicht angemeldet
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= "";
}