nicht angemeldet
bilderbuch mit thumbmails
kann mir jemand sagen, wie ich ein bilderbuch mit thumbmails machen kann? man sollte durch die thumbmails blättern können und dann bilder auswählen können.
danke im voraus
christian
-
Grüß Dich,
Deine Frage ist etwas allgemein gehalten.
Ich versuche es auch mal allgemein:
-
Thumbnails sind kleine Vorschaubilder. Das bedeutet, Du must nicht nur die zu zeigenden Bilder herstellen, sondern auich die kleinen Bilder bereitlegen. Du könntest auf die Idee kommen, einfach die Original-großen Bilder zu nehmen, und im entsprechenden HTML-Tag (img) die Maße verkleinern. Das würde auch funktionieren, ginge aber am Sinn vorbei. Erstes Ziel ist es ja nicht, kleine Bilder zu zeigen, sondern Deinen Besuchern die mit den Originalbildern verbundenden großen Datenmengen zu ersparen.... und das geht nur mit wirklich (!)kleinen Bildern.
-
diese kleinen Bilder stellst Du dann auf einer Seite dar. Nebeneinader, untereinander, mit Rahmen, ohne, wie Du willst. Aus jedem Bild machst Du mit dem a-Tag einen Verweis zur Seite, auf der das Originalbild liegt. Als alt-Text für das img-Tag des kleinen Bildes empfiehlt es sich, die kb-Zahl des großen Bildes zu notieren. So weiß jeder, was auf ihn zukommt.
-
Du kannst auch ein Program zum erstellen dieser Vorschauseiten benutzen, ThumpPlus wird zum Beispiel gerne dafür benutzt. Das Programm packt die Vorschaubilder in eine Tabelle (empfiehlt sich eh), und Du kannst die erstellten Seiten nach Deinem Geschmack ergänzen.
Hilfe zu den genannten Tags findest zu in SELFHTML....
Chräcker
-
danke für deine antwort, aber ich meine etwas anderes. ich möchte ein bilderbuch benutzen, wie es in selfhtml beschrieben ist(java glaube ich). dort werden aber die ganzen bilder geladen. ich möchte aber, dass nur thumbmails geladen werden. ich weiss nicht, wie ich dort bei den bildern einen link einbauen kann(kann nicht javascript programmieren).
ein ähnliches bilderbuch habe ich schon gesehen. es war mit flash gemacht.danke trotzdem
christian
p.s: in selfhtml bei stichwortsuche und dann bilderbuch ist es beschrieben, wie man ein solches macht.(leider ohne thumbmails)
Grüß Dich,
Deine Frage ist etwas allgemein gehalten.
Ich versuche es auch mal allgemein:
-
Thumbnails sind kleine Vorschaubilder. Das bedeutet, Du must nicht nur die zu zeigenden Bilder herstellen, sondern auich die kleinen Bilder bereitlegen. Du könntest auf die Idee kommen, einfach die Original-großen Bilder zu nehmen, und im entsprechenden HTML-Tag (img) die Maße verkleinern. Das würde auch funktionieren, ginge aber am Sinn vorbei. Erstes Ziel ist es ja nicht, kleine Bilder zu zeigen, sondern Deinen Besuchern die mit den Originalbildern verbundenden großen Datenmengen zu ersparen.... und das geht nur mit wirklich (!)kleinen Bildern.
-
diese kleinen Bilder stellst Du dann auf einer Seite dar. Nebeneinader, untereinander, mit Rahmen, ohne, wie Du willst. Aus jedem Bild machst Du mit dem a-Tag einen Verweis zur Seite, auf der das Originalbild liegt. Als alt-Text für das img-Tag des kleinen Bildes empfiehlt es sich, die kb-Zahl des großen Bildes zu notieren. So weiß jeder, was auf ihn zukommt.
-
Du kannst auch ein Program zum erstellen dieser Vorschauseiten benutzen, ThumpPlus wird zum Beispiel gerne dafür benutzt. Das Programm packt die Vorschaubilder in eine Tabelle (empfiehlt sich eh), und Du kannst die erstellten Seiten nach Deinem Geschmack ergänzen.
Hilfe zu den genannten Tags findest zu in SELFHTML....
Chräcker
-
Hallo Christian,
nur der Genauigkeit wegen: es wird Javascript verwendet und nicht Java ;-)
Da hast Du Dir als Anfänger aber was vorgenommen. Ich könnte Dir jetzt ein entsprechendes Programm schreiben, aber ehrlich, ich habe auch noch das eine oder andere zu tun und es heist ja Self(!)html....
"Trotzdem" um Dich nicht ganz im Regen stehen zu lassen hier ein paar Tips: Muß es wirklich ein "aufblätterndes" Buch sein? Versuch doch erst einmal ein Buch ohne diesen aufroll-Effekt zu machen. Zum Beispiel (sagen wir mal) 4 mal 4 Thumbnails auf vier Seiten verteilt. Und jede Seite wird durch Rahmengrafiken wie ein Fotoalbum designt.... und unten kommen "weiterblättern-Links".... zum Beispiel alle kleinen Bildchen in eine Tabelle und die Zellen hinterlegst Du mit einem "Marmorpapier"-Bildchen oder so, solche Bildchen gibts im Netz tausendfach. Und glaub mir, mit einem guten Design kann Deine Seite immer noch tausend mal besser sein als ein aufblätterndes Buch!
Es soll trotzdem der Aufrolleffekt sein? Dann hier die Theorie. In einem Div-Bereich (und für den NS ein Layer-Bereich) gestaltest Du die Thumbnail-Tabelle wie sie letztendlich erscheinen soll. Das Div (Layer) wird aber nicht knall auf Fall angezeigt, sonder nur zuerst nur ein schmaler Bereich. (Clipping) und per Javascript wird dieser Bereich dynamisch vergrößert bis der ganze Bereich zu sehen ist. Der bBereich (div-Layer) war schon da, nur der angezeigte Bereich wächst halt von schmal bis maximum.
Jetzt habe ich sicherlich eine Menge begriffe verwendet, die Dir nichts sagen. und das ist das Problem. Wenn ich alles erkläre, habe ich das Programm für Dich geschrieben. Und das wäre ja nicht Self, oder? Du kannst also wählen:
- Entweder Du verzichtest (was ich nicht machen würde)
- Du suchst in einem Internet-Bereich ohne das Wort Self nach einer fertigen Lösung (nicht die schlechteste Überlegung, nicht jeder Autofahrer muß sein Auto selber bauen können) oder
- Du lernst selber langsam Javascript. "Schreibe" das bBeispiel ab und versuche es abzuändern. Ich weiß, die Beispiele in SELFHTML sind nicht immer ganz leicht, aber nur so geht es. Und wenn Du gezielte Fragen hast, wie dumm sie Dir auch scheinen, stell sie hier....
Chräcker
-
ich hab jetzt sowas wie ich wollte. doch der quelltext macht mir ein bisschen sorgen. egal wie gross das bild, es wird immer gleichgross angezeigt. wie kann ich das ändern?
hier der quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
<TITLE>Fotogallerie</TITLE>
<style type="text/css">
<!--
b.header{font-size:110%;font-familiy:Optimum,Arial;color:#189878}
// td{font-familiy:Optimum,Arial;}
//-->
</style><script language="JavaScript1.1">
maxZahlBilder = 4; // Anzahl Bilder, die maximal angezeigt werden können.
zahlBilder = 0; // Anzahl Bilder, die geladen wurden und angezeigt werden.var Bild = new Array(maxZahlBilder);
// preload first picture:
Bild[0] = new Image();
Bild[0].src="funpics/test0.jpg";
status = "lade Bild 1...";// Is Netscape-Browser:
isNet = navigator.appName.toLowerCase().substr (0,3) == "net";var appVersion = navigator.appVersion;
//var pos = appVersion.indexOf ("MSIE");
appVersion = appVersion.substr (appVersion.indexOf ("MSIE") + 4, 5);
var version = parseInt (appVersion);// Is Microsoft-Internet-Explorer version 5 or higher:
isMsIe5 = (! isNet) && version >= 5;/*
alert ("navigator.appVersion = " + navigator.appVersion +
"\n\n" +
"appVersion = " + appVersion +
"\n\n" +
"isMsIe5 = " + isMsIe5 +
"\n\n" +
"version = " + version);
*/
//version = 4;function loadImage (tryNr)
{
var nextTryNr = tryNr + 1;
if (zahlBilder == maxZahlBilder)
{
status = zahlBilder + " Bilder geladen.";
return;
}
if (isNet Bild[zahlBilder].complete == true)
{
// alert ("loaded Image " + zahlBilder + "complete.");
nextTryNr = 0;
++zahlBilder;
Bild[zahlBilder] = new Image();
Bild[zahlBilder].src="funpics/test" + zahlBilder + ".jpg";
status = "lade Bild " + (zahlBilder + 1) + "...";
}
if (nextTryNr < 15)
setTimeout ("loadImage (" + nextTryNr + ");", 1000);
else
status = zahlBilder + " Bilder geladen.";
}var zeige = 0;
var aktuelleBreite = 0;
var Breite = 280;
var Geschwindigkeit = 20;function Blaettern(Richtung)
{
if (zahlBilder == 0)
{
// alert ("function Blaettern: zahlBilder == 0") //debug
return;
}
zeige = zeige + Richtung;
if(zeige >= zahlBilder)
{
// alert ("function Blaettern: zeige >= zahlBilder: \n" + zeige + " >= " + zahlBilder) //debug
zeige = 0;
}
else if(zeige < 0)
zeige = zahlBilder - 1;
if (document.dasBild)
document.dasBild.src = Bild[zeige].src;
else if(document.all)
document.all.dasBild.src = Bild[zeige].src;
else if(document.layers)
document.layers['Bildbereich'].document.dasBild.src = Bild[zeige].src;
BildAufbauen();
}function BildAufbauen()
{
var weiterAufbauen = true;
if(aktuelleBreite <= Breite)
{
if(document.all)
{
if (version >= 5)
document.all.Bildbereich.style.clip="rect(0 "+ aktuelleBreite + " 190 0)";
else
{
if (document.all.Bildbereich.clip)
document.all.Bildbereich.style.clip="rect(0 "+ Breite + " 190 0)";
document.all.Bildbereich.visible="visible";
weiterAufbauen = false;
}
}
else if(document.layers)
document.layers['Bildbereich'].clip.right = aktuelleBreite;
aktuelleBreite = aktuelleBreite + Geschwindigkeit;
if (weiterAufbauen)
window.setTimeout("BildAufbauen()",0);
}
else
{
aktuelleBreite = 0;
if(document.all)
document.all.Bildbereich.style.clip="rect(0 " + Breite + " 190 0)";
else if(document.layers)
document.layers['Bildbereich'].clip.right = Breite;
}
}</script>
</HEAD>
<!--
<BODY BGCOLOR=#f8fff8 text=#111111 link=#189878 vlink=#088868 onLoad="Init()">
<div style="position:absolute; left:50px; top:140px; width:280px; height:190px; visibility:visible"></div>
<font face="Optimum, Arial" size=4>
-->
<rst_small_page_header>
<p></rst_small_page_header>
<table width="500" border="0" cellspacing="0" align="left">
<tr> <td align=center valign=middle colspan=4 height=300><div id="Bildbereich" align=center style="position:absolute; left:110px; top:140px; width:280px; height:190px; padding:0px; clip:rect(0 280 190 0); visibility:visible"><img name="dasBild" src="bilderbuch/Qausst0.jpg" border=0 width=280 height=190></div>
</td>
</tr>
<tr>
<td colspan=4 align=center> <p><font face="Optimum, Arial" color="189878" size="2"><a href="javascript:Blaettern(-1)"><img src="pics/back.gif" width=40 height=43 alt="" border="0"></a> <a href="javascript:Blaettern(1)"><img src="pics/forward.gif" width=40 height=43 alt="" border="0"></a></font><p> </td>
</table>
<div id="doNotDeleteThis"> </div>
<p>
<font face="Optimum, Arial" size=4>
</font><script language="JavaScript1.1">
setTimeout ("loadImage (0);", 500);
</script></BODY>
</html>danke christian
-
ähhm, mal 'ne frage: du meinst nicht zufällig nur nen ganz einfachen
aufruf oder ? wobei einfach ein kleineres bild als link angezeigt wird ?<a href="jetzt_bin_ich_erwachsen.jpg">
<img src="noch_bin_ich_klein.gif" border="0">
</a>Die Bilder lassen sich gut mit einigen Tools in Thumps umwandeln wie
z.b. pic2htm oä. ich glaube der Grafikviewer Thumpsplus bietet auch eine entspechende export funktion.-
hallo,
um ein bilderbuch mit möglichst geringen aufwand zu erstellen bietet sich z.b. das tool thumbplus an. 30-tage trail ist im netz downloadbar. dort gibt es einen web-page-wizard mit dem eine html-site mit thumbnails erstellt wird und wenn du auf ein thumb drückst, dann geht ein dein bild in großer darstellung auf.
wie gesagt, daß ist ein tool und erfordert keinerlei html- bzw. java-kenntnisse. wenn du es eilig hast dann ist es in jedem fall zu empfehlen.
aber die straighte linie ist immer noch das was ich am liebsten handle.ciao - sascha.
-
Ein Tool das thumbnails herstellt ist auch in dem (Freeware-) Programm Irfan-View enthalten - Wenn man die Ergebnisse noch ein bißchen in die Mangel nimmt, kommt recht Erfreuliches heraus :-)
Gruß Eckard,
-
-
-
Hallo Christian,
unten im Body (also hinter dem Tag Body) steht ein Div. In diesem steht ein img-Tag und dort stehen die Größen des Bildes in Height und width fest drin. Nun könnte man diese Angaben einfach löschen (inklusive der Wörter width und height), aber ich weiß nicht, ob das reicht (ausprobieren ;-) ) denn: dieses Img wird vom Javascript-Programm aus mit Bildern bestückt. und ich meine mich zu erinnern, daß ein einmal so ferngesteuertes Img die ersten höhen und breitenangabe beibehält.
Wenn dem so ist, dann müste im obigen Javascriptprg der gesammte img-Tag dynamisch immer wieder neu mit den richtigen Maßen reingeschrieben werden.... (viel Spaß beim SELF-machen)
oder einfacher:
Du sorgst dafür, daß Deine Bilder eben alle gleich groß sind. Nimm das größte Bild und seine Maße. Alle kleineren Bilder versiehst Du jetzt mit einem Rand, der die farbe Deines Hintergrunds hat. (z.Bsp. schwarz....), und zwar so breiten Rand, bis sie die Maße des größten Bildes haben. Und diese Maße komme in das erwähnte Div.
Und ansonsten ein klitzekleiner neunmalkluger Hinweis: so gerne ich geholfen habe, dies ist wirklich ein SELF-html Forum ;-) und Self macht wirklich Spaß ;-)))
Chräcker
-
-
-