Image Fade (für alle Browser) zusammensetzen

CodexX

Grünschnabel
hi js-profis!

ich habe wirklich lange nach einem guten script zum ein und ausfaden von bildern gesucht, dass sowohl im IE als auch im Mozilla oder Netscape funktioniert.

Dabei habe ich unter anderem die folgenden zwei scripte gefunden.
das erste ist ein funtionierendes ein und ausfaden, das im IE geht (angeblich auch im netscape), aber NICHT im mozilla.
das zweite funktioniert in ALLEN browsern, fadet aber nicht, sondern blendet ruckartig ein.
Code:
<script type="text/javascript">
function startFade (element, start, stop, step, delay) {
  if (element.filters || element.style && typeof 
element.style.MozOpacity != 'undefined') {
    element.startOpacity = start;
    element.opacity = start;
    element.stopOpacity = stop;
    element.step = step || (start < stop ? 10 : -10);
    element.delay = typeof delay == 'undefined' ? 10 : delay;
    element.tid = setTimeout('fade("' + element.id + '")', delay);
  }
}
function fade (elementId) {
  if (document.all)
    var element = document.all[elementId];
  else if (document.getElementById)
    var element = document.getElementById(elementId);
  element.opacity += element.step;
  if (element.step > 0 && element.opacity > element.stopOpacity)
    element.opacity = element.stopOpacity;
  else if (element.step < 0 && element.opacity < element.stopOpacity)
    element.opacity = element.stopOpacity;
  if (element.filters)
    element.filters.alpha.opacity = element.opacity;
  else
    element.style.MozOpacity = element.opacity + '%';
  if (element.step > 0 && element.opacity >= element.stopOpacity) 
    clearTimeout(element.tid);
  else if (element.step < 0 && element.opacity <= element.stopOpacity)
    clearTimeout(element.tid);
  else
    element.tid = setTimeout('fade("'+ element.id + '")', 
element.delay);
}
function clearFade (element) {
  if (element.tid)
    clearTimeout(element.tid);
}
</script>

<img src="pic1.jpg" id="anImage"
     onmouseover="startFade(this, 25, 100);" 
     onmouseout="clearFade(this); startFade(this, this.opacity, 25);"
Code:
<script>
function lightup(imageobject, opacity){
 if (navigator.appName.indexOf("Netscape")!=-1
  &&parseInt(navigator.appVersion)>=5)
    imageobject.style.MozOpacity=opacity/100
 else if (navigator.appName.indexOf("Microsoft")!= -1 
  &&parseInt(navigator.appVersion)>=4)
    imageobject.filters.alpha.opacity=opacity
}
</script>

<img src="pic1.jpg" style="filter:alpha(opacity=50); -moz-opacity:0.5" onMouseover="lightup(this, 100)" onMouseout="lightup(this, 30)">

ist jemand in der lage diese zwei scripts zu einem zusammenzusetzen, dass dann weich blendet und in allen browsern funktioniert!? müsste doch an hand der gegebenen codes möglich sein.

vielen dank im voraus.
ich bin mir sicher, dass auch viele andere user um solch einen code dankbar wären.
 

Neue Beiträge

Zurück