erawan: Problem bei Sliding mit CSS-Clipping/Javascript

Beitrag lesen

Hallo zusammen!

Bitte um Hilfe bei folgenden Problem(en):
Ich möchte bei einem Projekt gerne ähnliche Bild-Funktionen wie auf der Seite  http://www.arkan.at/allsite_prod1/ContentView/5/FrontEnd?pageId=512&language=de
jedoch ohne Einsatz von Flash statt dessen diese Funktionen mit Javascript umsetzen (jedoch so, dass jene die kein Javascript haben oder dieses deaktiviert haben trotzdem kein Nachteil haben)

Funktionen zum Einblenden des Hauptbildes und zum Scrollen hab ich bereits gefunden und auch mehr oder weniger erfolgreich unter Firefox/Safari zum Laufen gebracht.
Haken bei diesen ist leider, dass Sliding nur ohne Doctypeangabe funktioniert, was natürlich keine Lösung sein kann.
Im IE 7 hingegen geht gar nix. (von dem bekomm ich nur den Hinweis das ein Fehler auf der Seite ist ...)

Ich weiß dass das Gewollte recht komplex ist aber vielleicht findet ihr ja beim Drüberschauen Fehler, die bei der Lösung der Probleme vielleicht hilfreich sein könnten. Danke bereits im Voraus!

Quelltext der auf das Minimum reduzierten Seite

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
<title>Slidetest</title>  
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">  
<script type="application/javascript" src="inc/slide.js"> </script>  
<script type="text/javascript" src="inc/blend.js"> </script>  
<link href="css/trimmel-screen.css" rel="stylesheet" type="text/css" media="screen" />  
</head>  
  
<body onload="right('mainpic'); opacity('imgbox', 0, 100, 3000);">  
  <div id="imgbox" style="background: url(pix/test-breitv.jpg) 50% 50% no-repeat;">  
  <a href="javascript:shiftOpacity('mainpic', 1000)" title="Klicken f&uuml;r Gesamtansicht des Bildes"><img id="mainpic" name="mainpic" src="pix/test-breit.jpg" width="641" height="420" border="0" alt="Bild" /></a>  
  </div>  
  <ul class="piclist">  
    <li><a href="pix/test-breit.jpg" onclick="ChangeImg('mainpic',this.href,'pix/test-breitv.jpg'); return false;"><img src="pix/test-breit.jpg" alt="test" width="100" height="55" /></a></li>  
    <li><a href='pix/test-breit2.jpg' onclick="ChangeImg('mainpic',this.href,'pix/test-breit2v.jpg'); return false;"><img src="pix/test-breit2.jpg" alt="test" width="100" height="55" /></a></li>  
  </ul>  
</body>  
</html>  

Inhalt der Datei blend.js

  
/* <![CDATA[ */  
function opacity(id, opacStart, opacEnd, millisec) {  
 //speed for each frame  
 var speed = Math.round(millisec / 100);  
 var timer = 0;  
  
 //determine the direction for the blending, if start and end are the same nothing happens  
 if(opacStart > opacEnd) {  
  for(i = opacStart; i >= opacEnd; i--) {  
   setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));  
   timer++;  
  }  
 } else if(opacStart < opacEnd) {  
  for(i = opacStart; i <= opacEnd; i++)  
   {  
   setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));  
   timer++;  
  }  
 }  
}  
  
//change the opacity for different browsers  
function changeOpac(opacity, id) {  
 var object = document.getElementById(id).style;  
 object.opacity = (opacity / 100);  
 object.MozOpacity = (opacity / 100);  
 object.KhtmlOpacity = (opacity / 100);  
 object.filter = "alpha(opacity=" + opacity + ")";  
}  
/* ]]> */  

Inhalt der Datei slide.js

  
/* <![CDATA[ */  
  var picWidth=641, picHeight=420;  // Bild-Maße  
  var xAbs=0, yAbs=0;   // absolute Position des Bildes zu Beginn  
  var x=0, y=0;    // relative Position des Ausschnitts zu Beginn  
  var clipWidth=560, clipHeight=420; // Ausschnitts-Maße angeben  
  var restWidth=picWidth-clipWidth;  // Hilfsgröße  
  var restHeigth=picHeight-clipHeight;  // Hilfsgröße  
  
  function movehor(imgid) {  
    document.getElementById(""+imgid+"").style.clip = "rect("+y+" "+(x+clipWidth)+" "+(y+clipHeight)+" "+x+")";  
    document.getElementById(""+imgid+"").style.left=xAbs;  
  }  
  
  // Ausschnitt nach rechts  
  function right(imgid) {  
    x++, xAbs--;  
    movehor(imgid);  
 if(x==restWidth) setTimeout("left('"+imgid+"')",2500);  
      else setTimeout("right('"+imgid+"')",40);  
  }  
  // Ausschnitt nach links  
  function left(imgid) {  
    x--, xAbs++;  
    movehor(imgid);  
    if(x==0) setTimeout("right('"+imgid+"')",2500);  
      else setTimeout("left('"+imgid+"')",40);  
  }  
  
  function ChangeImg(imgid,newpic,newbg){  
 document.getElementById("imgbox").style.background = "url("+newbg+") 50% 50% no-repeat";  
 document.getElementById(""+imgid+"").src = newpic;  
  }  
 /* ]]> */  

Auszug aus dem Style Sheet

  
#imgbox{  
width:560px;  
height:420px;  
overflow:hidden;  
position:relative;  
opacity:0;  
-moz-opacity: 0;  
-khtml-opacity:0;  
filter: alpha(opacity=0);  
z-index:1;  
}  
#imgbox img{  
position:absolute;  
top:0;  
left:0;  
clip:rect(0 560 420 0);  
z-index:2;  
}