4now: bilderbuchbeispiel mit .clip bild aufbauen von rechts ?

Beitrag lesen

Hallo !

habe versucht das selfhtml script für das bilderbuch so umzuschreiben daß die bilder sich nicht von links sondern von der rechten seite aufbauen. Leider funktioniert es nicht nur .right gegen .left auszutauschen und die rect Werte in der Klammer anzupassen. Was mache ich falsch ?

Liegt es daran daß: "Damit überhaupt ein Ausschnitt sichtbar ist, muss der Wert für "unten" größer sein als der für "oben" und der Wert für "rechts" größer als der für "links"."

<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!--
var Bild = new Array();
Bild[0] = new Image(); Bild[0].src="bilderbuch01.gif";
Bild[1] = new Image(); Bild[1].src="bilderbuch02.gif";
Bild[2] = new Image(); Bild[2].src="bilderbuch03.gif";
Bild[3] = new Image(); Bild[3].src="bilderbuch04.gif";
Bild[4] = new Image(); Bild[4].src="bilderbuch05.gif";

var zeige = 0;
var Breite = 300;
var aktuelleBreite = 0;
var Schrittweite = 6;
var Schrittverzoegerung = 1;

function Blaettern(Richtung) {
 zeige = zeige + Richtung;
 if(zeige > Bild.length - 1) zeige = 0;
 else if(zeige < 0) zeige = Bild.length - 1;
 if(DOM || MS)
   getElem("id","Bildbereich",null).style.clip="rect(0 0 225 0)";
 if(DOM && !MS && !OP) {
   var img = document.createElement("img");
   var src = document.createAttribute("src");
   src.nodeValue = Bild[zeige].src;
   img.setAttributeNode(src);
   getElem("id","Bildbereich",null).replaceChild(img, getElem("id","Bildbereich",null).firstChild);
 }
 else if(MS) {
   document.all.Bildbereich.innerHTML = "<img src="" + Bild[zeige].src + "">";
 }
 else if(NS) {
   getElem("index",0,null).visibility = "hide";
   setCont("index",0,null,"<img src="" + Bild[zeige].src + "">");
   getElem("index",0,null).clip.right = 0;
   getElem("index",0,null).visibility = "show";
 }
 BildAufbauen();
}

function BildAufbauen() {
 if(aktuelleBreite <= Breite) {
  if(DOM || MS && !OP)
    getElem("id","Bildbereich",null).style.clip="rect(0 "+ aktuelleBreite +" 225 0)";
  else if(NS)
    getElem("index",0,null).clip.right = aktuelleBreite;
  aktuelleBreite = aktuelleBreite + Schrittweite;
  window.setTimeout("BildAufbauen()", Schrittverzoegerung);
 }
 else {
  aktuelleBreite = 0;
  if(DOM || MS)
    getElem("id","Bildbereich",null).style.clip="rect(0 "+ Breite +" 225 0)";
  else if(document.layers)
    getElem("index",0,null).clip.right = Breite;
 }
}

function SEITE_init() {
 if(DOM && !MS && !OP) {
   img = document.createElement("img");
   var src = document.createAttribute("src");
   src.nodeValue = Bild[0].src;
   img.setAttributeNode(src);
   getElem("id","Bildbereich",null).appendChild(img);
 }
 else if(document.all)
   document.all.Bildbereich.innerHTML = "<img src="" + Bild[0].src + "">";
 else if(NS)
   setCont("index",0,null,"<img src="" + Bild[0].src + "">");
}
//-->
</script>
<style type="text/css">
<!--
#Bildbereich {
 position:absolute; left:10px; top:140px; padding:0px; clip:rect(0 300 225 0); visibility:show; }
#Navigationsbereich {
position:absolute; left:320; top:140; width:100; font-size:18pt; }
 -->
</style>

</head>
<body bgcolor="#FFFFFF" onLoad="SEITE_init()">

<div id="Bildbereich">
</div>

<div id="Navigationsbereich">
[<a href="javascript:Blaettern(-1)"><b><<</b></a>]
[<a href="javascript:Blaettern(1)"><b>>></b></a>]
</div>

</body>
</html>

+gruß