Bildershow

knupper · 14 Mai 2006

Hallo,
ich möchte gern eine Bildershow aus Bildern unterschiedlicher Größe (Länge x Breite) in meine Seite einbauen, die durch Blättern (vor und zurück) durch klicken auf Schaltflächen betätigt werden kann. Gleichzeitig sollen Bildunterschriften wechseln. (Mit Bildern gleicher Größe und ohne Unterschriften habe ich es schon hinbekommen).
Kann mir da jemand helfen?

Commodore · 14 Mai 2006

dann poste erstmal, wie du es mit gleicher größe und ohne unterschriften geschafft hast :roll: woher sollen wir denn wissen, wie du das gelöst hast?

knupper · 14 Mai 2006

Der Code sieht so aus:

<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
var Bild = new Array();
Bild[0] = new Image();
Bild[0].src = "Bilder/BrandenburgerTor.jpg";
Bild[1] = new Image();
Bild[1].src = "Bilder/Stelenfeld.jpg";
Bild[2] = new Image();
Bild[2].src = "Bilder/ImStelenfeld.jpg";
Bild[3] = new Image();
Bild[3].src = "Bilder/Springbrunnen.jpg";
Bild[4] = new Image();
Bild[4].src = "Bilder/JapanischerGarten.jpg";
Bild[5] = new Image();
Bild[5].src = "Bilder/ChinesischerGarten.jpg";
Bild[6] = new Image();
Bild[6].src = "Bilder/MarzGarten.jpg";
Bild[7] = new Image();
Bild[7].src = "Bilder/RathausSteglitz.jpg";
Bild[8] = new Image();
Bild[8].src = "Bilder/Teppich.jpg";
Bild[9] = new Image();
Bild[9].src = "Bilder/BB.jpg";

var bildbereich;
var zeige = 0;
var Breite = 460;
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 345px 0)";
} else if (NS4) {
bildbereich.clip.right = 0;
}
if (DOM && bildbereich.firstChild) {
bildbereich.firstChild.src = Bild[zeige].src;
} else if (MSIE4) {
bildbereich.innerHTML = '

';
} else if (NS4) {
bildbereich.visibility = "hide";
setContent("id", "Bildbereich", null,
'

');
bildbereich.visibility = "show";
}
BildAufbauen();
}

function BildAufbauen () {
if (aktuelleBreite <= Breite) {
if (DOM || MSIE4) {
bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 345px 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 345px 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 = '

';
} else if (NS4) {
setContent("id", "Bildbereich", null,
'

');
}
}
</script>
<style type="text/css">
body { color:black; background-color: #698ea6; }
#Bildbereich { position:absolute; left:300px; top:85px; padding:0;
clip:rect(0 460px 345px 0); visibility:show; }
#Navigationsbereich { position:absolute; left:300px; top:440px;
width:200px; font-size:20px; }
</style>

</head>
<body onLoad="Init()">
<font face="Arial" size=+2 color="#000013">Berlin Berlin - Meine Stadt in Bildern</font><hr color="#000013">

<div id="Bildbereich"></div>
<div id="Navigationsbereich">
vorheriges
nächstes
</div>

Dazu muss ich sagen, dass ich den (einschließlich der js-Datei) bei selfhtml kopiert und meinen Erfordernissen angepasst habe. Will sagen, dass ich so viel Ahnung nicht habe!!!

Commodore · 14 Mai 2006

ok, bitte erstmal das ganze editieren, und in einen code-tag schreiben.

am besten dann noch den link zu selfhtml reinschreiben.

edit: ich denke mal, es war diese seite hier: http://de.selfhtml.org/dhtml/beispiele/bilderbuch.htm

mix2005 · 14 Mai 2006

wie wärs wenn du codes das nächste mal zwischen

Code:

und

schreiben würdest?

knupper · 14 Mai 2006

Code:

<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
var Bild = new Array();
Bild[0] = new Image();
Bild[0].src = "Bilder/BrandenburgerTor.jpg";
Bild[1] = new Image();
Bild[1].src = "Bilder/Stelenfeld.jpg";
Bild[2] = new Image();
Bild[2].src = "Bilder/ImStelenfeld.jpg";
Bild[3] = new Image();
Bild[3].src = "Bilder/Springbrunnen.jpg";
Bild[4] = new Image();
Bild[4].src = "Bilder/JapanischerGarten.jpg";
Bild[5] = new Image();
Bild[5].src = "Bilder/ChinesischerGarten.jpg";
Bild[6] = new Image();
Bild[6].src = "Bilder/MarzGarten.jpg";
Bild[7] = new Image();
Bild[7].src = "Bilder/RathausSteglitz.jpg";
Bild[8] = new Image();
Bild[8].src = "Bilder/Teppich.jpg";
Bild[9] = new Image();
Bild[9].src = "Bilder/BB.jpg";


var bildbereich;
var zeige = 0;
var Breite = 460;
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 345px 0)";
  } else if (NS4) {
    bildbereich.clip.right = 0;
  }
  if (DOM && bildbereich.firstChild) {
    bildbereich.firstChild.src = Bild[zeige].src;
  } else if (MSIE4) {
    bildbereich.innerHTML = '[img]' + Bild[zeige].src + '[/img]';
  } else if (NS4) {
    bildbereich.visibility = "hide";
    setContent("id", "Bildbereich", null,
      '[img]' + Bild[zeige].src + '[/img]');
    bildbereich.visibility = "show";
  }
  BildAufbauen();
}

function BildAufbauen () {
  if (aktuelleBreite <= Breite) {
    if (DOM || MSIE4) {
      bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 345px 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 345px 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]' + Bild[0].src + '[/img]';
  } else if (NS4) {
    setContent("id", "Bildbereich", null,
      '[img]' + Bild[0].src + '[/img]');
  }
}
</script>
<style type="text/css">
body { color:black; background-color: #698ea6; }
#Bildbereich { position:absolute; left:300px; top:85px; padding:0;
  clip:rect(0 460px 345px 0); visibility:show; }
#Navigationsbereich { position:absolute; left:300px; top:440px;
  width:200px; font-size:20px; }
</style>

</head>
<body onLoad="Init()">
<font face="Arial" size=+2 color="#000013">[b]Berlin Berlin - Meine Stadt in Bildern[/b]</font><hr color="#000013">
 [img]Bilder/Distanz_3.gif[/img]

[url="Bilder.html"][img]Bilder/Fernsehturm.jpg[/img][/url]
<div id="Bildbereich"></div>
<div id="Navigationsbereich">
[url="javascript:Blaettern(-1)"]vorheriges[/url]
[url="javascript:Blaettern(1)"]nächstes[/url]
</div>

Commodore · 14 Mai 2006

du solltest deinen beitrag editieren, und keinen neuen schriben :lol:

dafuer klickst du auf den button:

neben deinen beitrag. ausserdem sollte das nicht so gemint sein, dass du am anfang und ende <code></code> schreibst, sondern

Code:

hier die angaben [[b][/b]/code]

mix2005 · 14 Mai 2006

das war jetzt nicht nötig.
du könntest auch oben auf den editieren knopf bei deinem früheren beitrag klicken und dort code tags einfügen die man zwischen [] schreibt nicht zwischen <>

edit: :lol: commodore bist immer schneller

knupper · 14 Mai 2006

War das jetzt richtig?
@comodore: der link zu selfhtml ist genau der richtige

Commodore · 14 Mai 2006

@knupper: ja, so ist es richtig.
@mix2005: das ist absicht :lol:

ich schau mal, wie das ganze funktioniert, udn dann versuche ich da was dran zu ändern, sodass diie bilder unterschiedlich groß sein können.

edit: muss das auch so sein, dass die bilder langsam geöffnet werden, oder geht das auch ohne?

mix2005 · 14 Mai 2006

langsam geöffnet? meinst du so überblenden, auflösen oder wat?

knupper · 14 Mai 2006

@commodore: Bitte um Entschuldigung, die letzte Frage hatte ich irgendwie übersehen. Es wäre natürlich schön, wenn die Bilder langsam geöffnet werden könnten, es geht aber auch ohne. Danke schon mal für deine Hilfe!!!

Bildershow

knupper

Neues Mitglied

Commodore

Guest

knupper

Neues Mitglied

Commodore

Guest

mix2005

Guest

knupper

Neues Mitglied

Commodore

Guest

mix2005

Guest

knupper

Neues Mitglied

Commodore

Guest

mix2005

Guest

knupper

Neues Mitglied

Neueste Beiträge