nicht angemeldet
Hallo,
möchte in meine HTML-Datei diesen Bilderbuch-Effekt mit einbauen!
Wenn ich aber Navigationsleiste und Bildbereich übereinander, linksbündig setze, funktioniert der Blätter-Effekt nicht! WARUM?
Überschneiden sich die beiden Java-Bereiche??
Kann ich diesen "clip:rect" Part nicht einfach auf auto setzen, sodass es je nach Bild angepasst wird??
Teil von der Datei:
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
var Bild = new Array();
Bild[0] = new Image();
Bild[0].src = "images/DSC_5079k.jpg";
Bild[1] = new Image();
Bild[1].src = "images/DSC_5236k.jpg";
Bild[2] = new Image();
Bild[2].src = "images/DSC_5118k.jpg";
Bild[3] = new Image();
Bild[3].src = "images/DSC_5125k.jpg";
Bild[4] = new Image();
Bild[4].src = "images/DSC_5331k.jpg";
var bildbereich;
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 || MSIE4) {
bildbereich.style.clip = "rect(0 auto 700px 0)";
} else if (NS4) {
bildbereich.clip.right = 0;
}
if (DOM && bildbereich.firstChild) {
bildbereich.firstChild.src = Bild[zeige].src;
} else if (MSIE4) {
bildbereich.innerHTML = '<img src="' + Bild[zeige].src + '">';
} else if (NS4) {
bildbereich.visibility = "hide";
setContent("id", "Bildbereich", null,
'<img src="' + Bild[zeige].src + '">');
bildbereich.visibility = "show";
}
BildAufbauen();
}
function BildAufbauen () {
if (aktuelleBreite <= Breite) {
if (DOM || MSIE4) {
bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 700px 0)";
} else if (NS4) {
bildbereich.clip.right = aktuelleBreite;
}
aktuelleBreite = aktuelleBreite + Schrittweite;
window.setTimeout("BildAufbauen()", Schrittverzoegerung);
} else {
aktuelleBreite = 0;
if (DOM || MSIE4) {
bildbereich.style.clip = "rect(0 " + Breite + "px 700px 0)";
} else if (NS4) {
bildbereich.clip.right = Breite;
}
}
}
function Init () {
bildbereich = getElement("id", "Bildbereich");
if (DOM && document.createElement && bildbereich.appendChild) {
var img = document.createElement("img");
img.setAttribute("src", Bild[0].src);
bildbereich.appendChild(img);
} else if (MSIE4) {
bildbereich.innerHTML = '<img src="' + Bild[0].src + '">';
} else if (NS4) {
setContent("id", "Bildbereich", null,
'<img src="' + Bild[0].src + '">');
}
}
</script>
<style type="text/css">
body { color:black; background-color:white; }
#Bildbereich { position:absolute; left:64px; top:120px; padding:0;
clip:rect(0 auto 700px 0); visibility:show; }
#Navigationsbereich { position:absolute; left:40px; top:100px;
width:100px; font-size:10pt; }
</style>
</head>
<body onload="Init()">
<div id="Bildbereich"></div>
<div id="Navigationsbereich">
[<a href="javascript:Blaettern(-1)"><<</a>
<a href="javascript:Blaettern(1)">>></a>]
</div>
BITTE HELFEN!!
Danke:)