<img> "animieren"

[mormel]

Hallo Leute!

Ich möchte gerne eine Grafik "animieren", und zwar wird sie am Anfang mit einer Größe von 1x1px dargestellt und dann bis zur vollen Größe vergrößert. Dies funktioniert im IE auch sehr gut, nur NC4x und N6 spielen da nicht mit. Im NC wird die Grafik nicht vergrößert und im N6 flackert sie wie wild. Weiß da jemand Rat?

Hier der Code:

<script language="JavaScript 1.2" type="text/javascript">
<!--
var text;
var X;

function animBild(X)
{
 X = X + 2;
 if (document.all || document.getElemetById)
 {
  document.Img.width = X;
  document.Img.height = X;
 }
 else if (document.layers)
 {
  document.layers["anim"].document.images["Img"].width = X;
  document.layers["anim"].document.images["Img"].height = X;
 }

if (X<401)
  setTimeout('animBild('+X+')', 10);
}

//-->
</script>

...

<div id="anim" style="position:absolute;width:400;height:400;visibility:visible">
  <table border="0" cellpadding="0" cellspacing="0" width="400" height="400">
    <tr valign="middle">
      <td align="center">
        <img src="images/anim/Bild6.gif" width="1" height="1" border="0" name="Img" alt="">
      </td>
    </tr>
  </table>
</div>

Vielen Dank für Eure Hilfe!
mormel

[Joachim]

hi,

document.images["Img"].height is read-only im nc. Wenn Du sowas machen
willst, muesstest Du das image-tag dynamisch in einen div-layer schreiben
und dabei die Groessenangabe manipulieren. Prinzip:

// einfache div-layer referenzierung
function lay(num)   {
return (nc? document.layers[num]: (ie4? document.all[num]: document.getElementById(num)));
}

// div-layer schreiben
function writeDiv(obj,text) {
  if(document.layers){
    with (obj.document) {
      open();
      write(text);
      close();
    }
  }
  else obj.innerHTML = text;
}

aufruf:

writeDiv(lay('DEINE_DIVID'),'<img src="...">');

hth

Gruesse  Joachim

[mormel]

Hallo!

document.images["Img"].height is read-only im nc.

Wo bekommt man eigentlich solche Infos her?

Wenn Du sowas machen willst, muesstest Du das image-tag dynamisch in einen div-layer schreiben

Hab ich mir schon irgendwie gedacht - vielen Dank!

hth

Ja, ein Problem bleibt aber leider bestehen: im NC wie auch im N6 flackert das Bild fürchterlich. Weiß da jemand Rat?

Anzusehen unter: http://www.profiss.de/test.htm

Danke und Gruß
mormel

[Joachim]

hi,

document.images["Img"].height is read-only im nc.
Wo bekommt man eigentlich solche Infos her?

U.a. von NC selbst:
http://developer.netscape.com/docs/manuals/js/client/jsguide/contents.htm
http://developer.netscape.com/docs/manuals/
http://developer.iplanet.com/docs/manuals/javascript.html
http://developer.iplanet.com/docs/manuals/dynhtml.html

in diesem Fall aber reicht ein Blick in die JS-Konsole...

im NC wie auch im N6 flackert das Bild fürchterlich.

hmm, ich wuerde eventuell anderen Wege gehen, entweder Du nimmst gleich ein
animiertes Gif (die Bewegungsphasen können ja in der Qualitaet
minimalisiert werden) oder Flash.

Ansonsten koenntest Du auch das img in ein div packen, und nur dessen clipping
manipulieren - das waere zwar nur ein Pseudo-zoom, laeuft aber sogar auf NC6
smooth ab - und der ist da wirklich schwach.

mehr faellt mir aus dem Stegreif nicht ein... falls Dich das clipping interessiert
kann ich Dir weiterhelfen...

hth

Gruesse  Joachim

[mormel]

Hallo

hmm, ich wuerde eventuell anderen Wege gehen, entweder Du nimmst gleich ein
animiertes Gif (die Bewegungsphasen können ja in der Qualitaet
minimalisiert werden) oder Flash.

Ich wollte kein animGif nehmen, da ich die Übergänge so fließend wie möglich gestalten wollte, die Grafik aber sehr klein sein sollte. Flash mag ich nicht und fällt damit auch aus.

Ansonsten koenntest Du auch das img in ein div packen, und nur dessen clipping
manipulieren - das waere zwar nur ein Pseudo-zoom, laeuft aber sogar auf NC6
smooth ab - und der ist da wirklich schwach.

Im NC ruckelt's immer noch gewaltig und wie muß das für N6 lauten, so document.getElementById("anim").style.clip.left?

Danke
mormel

[Joachim]

hi,

Flash mag ich nicht und fällt damit auch aus.

Fuer Animationen ist es halt unschlagbar.

Dann wohl clipping, hab da eine kleine Funktion, der Du nur
die Objektreferenz und clipping uebergeben musst (lay() hatte ich ja schon gepostet)
also dClip(lay('DIVID'),0,10,10,0):

var nc      = !!(document.captureEvents && !document.documentElement);
var ie4     = !!(!document.documentElement && document.all);
var dom     = !!document.documentElement;

function dClip(obj) {
 var clB = new Array('top','width','height','left');
 if(nc){
  for(i in clB) obj.clip[clB[i]] = arguments[i+1];
 }
 if(dom || ie4) obj.style.clip  = "rect("+arguments[1]+" "+arguments[2]+" "+arguments[3]+" "+arguments[4]+")";
}

hth

Gruesse  Joachim