Bildunterschrift DHTML

Pirouge · 30 Oktober 2009

Hallo liebes Forum,

Leider habe bisher nach langem Suchen keine Antwort auf mein Problem gefunden, obwohl ich denke, dass es so schwer nicht sein kann. Vielleicht kann mir ja jemand helfen. Ich hatte für die Bilder auf meiner Homepage bislang immer für jedes Bild eine extra HTML-Seite gemacht, was mir langsam zu unübersichtlich wird.

Glücklich war ich, als ich auf self-HTML eine Anleitung für ein "Bilderbuch" mit DHTML gefunden habe, bei der nun in einer HTML-Seite alle Bilder aufgelistet sind. Es funktioniert sogar, nur leider bin ich mit den Bildunterschriften nicht weiter gekommen. Es soll "einfach" bei jedem Bild eine Bildunterschrift erscheinen.

Das Problem ist, dass ich hier etwas benutzen will (Javascript, DHTML), das ich noch nicht ganz verstehe, was ich bislang versucht habe zu vermeiden. Insofern kann ich auch wenig variieren,
Auf dem (sehr schnippischen) selfHTML-Forum hat jemand die Idee mit
Bild[0].txt = "Bild 1"; eingebracht, allerdings stehe ich auf dem Schlauch, wie ich das einbinden kann, ich müsste ihm noch irgendwie mitteilen, dass er ihn wo anzeigen soll. Unten der Code von selfHTML, bei mir ist nichts wesentlich verändert.
Freue mich sehr über Hilfe!
Pirouge

HTML:

<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 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:white; }
#Bildbereich { position:absolute; left:10px; top:140px; padding:0;
  clip:rect(0 300px 225px 0); visibility:show; }
#Navigationsbereich { position:absolute; left:320px; top:140px;
  width:100px; font-size:24px; }
</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>

</body></code>
</html>

Sollte die .js-Datei dabei noch wichtig sein, kann ich sie noch einfügen, sonst: SELFHTML: Dynamisches HTML / Beispiele für die Praxis / Allgemeine DHTML-Bibliothek

crash · 30 Oktober 2009

Das Script ist stark veraltet, wie ganz selfhtml.org. Versuch mal ein neueres Script zu finden. Das dort zu korrigieren kommt einem kompletten Re-Write gleich.

Bildunterschrift DHTML

Pirouge

Neues Mitglied

crash

Neues Mitglied

Neueste Beiträge