• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilderstrecke

the_zoker_09

Mitglied
Hallo zusammen,
Ich möchte eine Bilderstrecke erstellen.
So was, was zum Beispiel Chip-Online für seine Online Beiträge her nimmt. (Beispiel Chip Beitrag)
Jetzt habe ich eine sehr einfache Version davon bei Self-HTML gefunden -> Bilderbuch

Jetzt meine Frage: Wie kann ich einen Link für ein Bild einsetzen.
Also wenn ich zum Beispiel ein Bild auf der Seite yx.jpg habe, wie kann ich dieses Bild (den Link davon) dann in das "Bilderbuch" einfügen???


Oder kennt jemand noch einen besseren Weg so was zu machen (mehr nach dem Chip Online Style)?


Vielen Dank
the_zoker_09
 
Gleich beim Einlesen der Datei, also außerhalb jeder Funktion, wird der JavaScript-Code ausgeführt, der zu Beginn des zweiten JavaScript-Bereichs notiert ist. Dort werden erst mal alle Grafiken eingelesen, die im Verlauf des Umblätterns angezeigt werden sollen. Denn nur wenn die Grafiken zu diesem Zeitpunkt bereits im Arbeitsspeicher sind, gibt es keine Synchronisationsprobleme. Dazu kommt das Seite images-Objekt von JavaScript zum Einsatz. Zuerst wird ein neuer, leerer Seite Array angelegt. Dann wird der Array mit Grafikobjekten gefüllt. Dem jeweiligen Image-Objekt, das zu diesem Zweck erzeugt wird, wird über die src-Eigenschaft eine gewünschte Grafikdatei zugewiesen.

Das bezieht sich auf diesen Bereich:

Code:
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";

Dort müsstest du die Pfade zu deinen Bildern einsetzen.
 
Das habe ich gemacht. Hat aber nicht funktioniert:
CrystalBlood | Clan zu Cross Fire auf PC

Schau dir an. Da sind keine Bilder.

Hier der Code:
HTML:
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
var Bild = new Array();
Bild[0] = new Image();
Bild[0].src = "http://s1.directupload.net/images/110322/rgoizzp3.jpg";
Bild[1] = new Image();
Bild[1].src = "http://s7.directupload.net/images/110325/9z6t9a2d.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 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 0 225px 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 225px 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 225px 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:black; }
#Bildbereich { position:absolute; left:10px; top:140px; padding:0;
  clip:rect(0 300px 225px 0); visibility:show; }

</style>

</head>
<body onload="Init()">

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

<div id="Navigationsbereich">
[<a href="javascript:Blaettern(-1)">&lt;&lt;</a>]
[<a href="javascript:Blaettern(1)">&gt;&gt;</a>]
</div>

Ich habe nur einen Teil durch Links ersetzt.
Aber warum geht das nicht?
 
Zurück
Oben