Hinweis: Das ist das Ende der Metanavigation. Es folgt die Kontext-Spalte.
Wer Javascript nicht selbst zusammenbasteln will, kann sich einer fertigen Bibliothek bedienen, z.B.:
Hinweis zu den Links
Problem mit einem Link?
Hinweis: Das ist das Ende der Kontext-Spalte.
Javascript - Bildbetrachter als neue Seite
Auf der Katzen-Webseite meiner Eltern sind viele Fotos. Diese werden auf einer HTML-Seite immer als kleine Index-Grafik angezeigt. Per Klick darauf wird das normale Foto auf einer neuen Seite präsentiert.Hierfür hätte man - wenn man serverseitige Programmierung ausschliesst - 2 Möglichkeiten: entweder man erstellt für jedes vergrössert darzustellende Bild eine separate HTML-Seite oder man kann es in JavaScript lösen.
Da keinerlei Navigationselemente enthalten sind, eignet sich dieses Verfahren nur für Seiten mit Frames. Oder ihr legt noch Hand an.
Anmerkung:
Auf der Webseite ist dieser hier beschriebene Bildbetrachter nicht mehr in Verwendung. Es werden stattdessen Popup-Fenster verwendet. Daher gibt es nachfolgend eine Demo.
Demo
So sieht es in der Praxis aus - einmal das Bild anklicken:
Seitenanfang
JavaScript
Das Ganze funktioniert so, dass man eine Funktion schreibt, die als Parameter einen Dateinamen der anzuzeigenden Grafik übergeben bekommt. Diese Funktion sorgt dafür, dass eine neue Seite erzeugt wird.
- Da wir keine Datei haben, die geladen werden soll, wird mit einem document.open(); der Browser veranlasst, eine neue (leere) Seite anzuzeigen.
- Anschliessend wird der gesamte HTML-Code mit
document.write(...); hineingeschoben.
Irgendwo im Body wird der Image-Tag geschrieben; als SRC-Attribut wird der Dateiname der Grafik eingetragen, den wir der Funktion mitgeben.
Anm.:
Falls wer serverseitige Programmierung kennt: die Übergabe des Headers text/html und 2 x Zeilenvorschub ist nicht notwendig. - Zu guterletzt wird das virtuelle Dokument per document.close(); geschlossen und der Browser zeigt es an.
Um zur letzten Seite zurück zu springen, lasse ich das aktuelle
Dokument nochmal vom Webserver holen. Der Dateiname steckt in der
Javascript-Variable document.location.pathname.
Die Nutzung des History-Objektes hätte sich eher angeboten,
da ein history.back(); auch die letzte horizontale Position des
letzten Dokumentes einstellt. Leider funktionierte das history.back();
aus diesem "künstlichen" Dokument heraus nicht mit allen
Browsern.
Für alle Hungrigen gibt es hier den Quellcode
des JavaScript-Anteils:
function Zoom(myPicture)
{
document.open();
document.write('<HTML>');
document.write('<HEAD>');
document.write('<TITLE>Bild-Betrachter</TITLE>');
document.write('</HEAD>');
document.write('<body text="#A0A0A0" bgcolor="#000000">');
document.write('<DIV ALIGN=CENTER>');
document.write('<h3>- - Bild-Betrachter - -</H3>\n');
document.write('Bild anklicken, um zurück zu gehen.<BR>');
document.write('<A HREF="' + document.location.pathname + '">');
document.write('<IMG SRC="'+ myPicture + '"');
document.write(' ALT="Bild anklicken, um zurück zu gehen."');
document.write(' BORDER=0>');
document.write('</A>');
document.write('</DIV>');
document.write('</BODY></HTML>');
document.close();
}
Seitenanfang
Einbindung im HTML-Code
Man sollte die obigen Codezeilen in eine js-Datei auslagern
und im Header der HTML-Datei referenzieren.
Der Aufruf der Funktion kann z.B. so aussehen:
<HTML>
<HEAD>
...
<SCRIPT SRC="graphic.js" LANGUAGE="JavaScript"></SCRIPT>
...
</HEAD>
<BODY>
...
<A HREF="foto001.jpg"
ONCLICK="javascript:Zoom('foto001.jpg'); return false;">
<IMG SRC="foto001_index.jpg" BORDER="0"></A>
...
</BODY>
</HTML>
Bei diesem Link wird die Grafik bei deaktiviertem Javascript im Browser angezeigt.
Wenn Javascript eingeschalten ist, wird die Funktion verwendet. Wichtig ist hierbei noch, das return false; dahinterzusetzen.
Javascript auslagern
andere Variante zur Anzeige von Grafiken:
Grafik in einem Popup anzeigen
Seitenanfang
