Hallo zusammen,
ich fand hier auf selfhtml eine interessante Art der Darstellung eines dynamischen Bilderbuchs zum Umblättern.
http://de.selfhtml.org/dhtml/beispiele/bilderbuch.htm
Ich konnte das Script auch soweit meinem vorläufigen Layout anpassen.
Am Script selber habe ich nur die Größenangaben verändert, dhtml.js unverändert auf den Server geladen und die vorläufigen Bilder umbenannt.
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
var Bild = new Array();
Bild[0] = new Image();
Bild[0].src = "images/bilderbuch01.gif";
Bild[1] = new Image();
Bild[1].src = "images/bilderbuch02.gif";
Bild[2] = new Image();
Bild[2].src = "images/bilderbuch03.gif";
Bild[3] = new Image();
Bild[3].src = "images/bilderbuch04.gif";
Bild[4] = new Image();
Bild[4].src = "images/bilderbuch05.gif";
var bildbereich;
var zeige = 0;
var Breite = 480;
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 0 500px 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 500px 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 500px 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>
Leider bekomme ich beim Klicken der Pfeiltasten, vorwärts wie rückwärts, immer wieder das Bild "bilderbuch01.gif" erneut geladen, und nicht die 4 weiteren Bilder :(
Hier einmal zur Ansicht:
http://alex-hache.de/littledance_5/preise.html
Wäre froh, wenn mich jemand auf meinen Fehler stoßen könnte.
Mit vielem Dank im Voraus, Alex