Seite erstellt von www.web-beckum.de - Letzte Änderung: 08.10.2006 16:41:53
Wir hängen diese Version an die im vorigen Kapitel erstellte Datei bilder.html an.
Das entsprechende Skript habe ich im Internet auf einer der vielen Seiten mit kostenlosen Skripten gefunden.
In unserem Projektverzeichnis erstellen wir ein Verzeichnis javascript
.
function Zeigen(Bild0,Breite0,Hoehe0)
{
Bild = Bild0;
Breite = Breite0;
Hoehe = Hoehe0;
sichtbar()
}
function sichtbar(){
Fenster_Hoehe = Hoehe + 100;
Fenster_Breite = Breite + 50;
Optionen = 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,
left=200,top=50,height='+Fenster_Hoehe+',width='+Fenster_Breite;
neues_Fenster = window.open('','',Optionen)
with (neues_Fenster)
{
document.writeln('<HTML>
<HEAD>
<TITLE>Bilder</TITLE>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
</HEAD>');
In den document.writeln keine Zeilenumbrüche einfügen!
Dieses ist hier nur wegen der besseren Lesbarkeit gemacht worden.
document.writeln('<BODY margin="10">');
document.writeln('<div align="center">');
document.writeln('<IMG SRC="'+Bild+'" WIDTH='+(Breite)+'HEIGHT='+(Hoehe)+' BORDER=0 ALT="'+Bild+'">');
document.writeln('<br><br><a href="javascript:close()">Fenster schließen</a>');
document.writeln('</div></BODY></HTML>')
}
}
Dieses Skript speichern wir in dem Verzeichnis javascript als bildoeffnen.js.
Wichtig! Darauf achten, dass kein Zeilenumbruch innerhalb von
document.writeln(ANWEISUNGEN);
steht. Sonst funktioniert das Skript nicht.
Das JavaScript besteht aus zwei Funktionen.
Die Funktion "Zeigen" (wird später innerhalb der HTML-Datei aufgerufen) bekommt beim Aufruf den Bildnamen, die Höhe des Bildes und die Breite des Bildes übergeben.
Die Funktion "Sichtbar" erzeugt dann das neue Browserfenster mit dem Bild.
Die Größe des Fensters wird mit den vorher übergebenen Werten für Höhe und Breite berechnet und in je einer Variablen gespeichert. Im Skript die Höhe um 100px größer wie das Bild und die Breite 50px.
Die Variable Optionen wird mit Werten für das zu öffnende Browserfenster belegt. Es ist festgelegt, das keine Elemente des Browsers (z.B. Navigationsleiste, Statusleiste, etc.) mit angezeigt werden. Das Fenster bekommt aber einen Scrollbalken und kann vom User auch vergrößert oder verkleinert werden.
Geöffnet wird das Browserfenster 200px vom linken Bildschirmrand und 50px von oben.
Für die Größenangabe des Fensters werden die zu Anfang der Funktion "Sichtbar" berechneten Werte eingesetzt.
Die Variabel "neues_fenster" wird mit dem Wert window.open (JavaScript-Befehl zum Öffnen eines neuen Fensters) belegt. Die beiden ersten Parameter von window.open (Anzuzeigende Seite und Namen des Fensters) bleiben leer, in den dritten Parameter werden die Werte unserer Variable Optionen geschrieben.
Mit with wird dann das neue Browserfenster geöffnet und mit den Anweisungen document.writeln Zeilenweise das HTML-Dokument zur Anzeige des Bildes dargestellt.
Jetzt müssen wir noch das Skript in unsere Seite bilder.html einbauen. Dazu muss im Kopfbereich (Zwischen <head> und </head>) der Seite folgendes eingetragen werden.
<script src="javascript/bildoeffnen.js" type="text/javascript"></script> </head>
Mit script src (engl. Script Quelle) wird das JavaScript in den Browser geladen.
Um die Bilder dann anzeigen zu können, ist in unserer Seite diese Tabelle unterhalb der bereits bestehenden Tabelle zu ergänzen.
</table>
<h1>Bilder der Wollmaus</h1>
<p>Hier finden sich einige der wenigen Bilder der Wollmaus, diesmal öffnen sie sich über ein JavaScript</p>
<table width="100%" border="0">
<tr>
<td class="untenrechts">
<a href ="javascript:Zeigen('bilder/wollmaus1.jpg',256,256)">
<img src="bilder/mini_wollmaus1.jpg" width="100" height="100" alt="Wollmaus auf Boden" /></a>
<noscript><a href="bilder/wollmaus1.jpg" target="_blank">Wollmaus</a></noscript>
<br /> Bild wird durch ein JavaScript in einem kleineren Fenster geöffnet.
</td>
<td class="untenrechts">
<a href ="javascript:Zeigen('bilder/wollmaus2.jpg',357,139)">
<img src="bilder/mini_wollmaus2.jpg" width="100" height="39" alt="Wollmaus in Ecke" /></a>
<noscript><a href="bilder/wollmaus2.jpg" target="_blank">Wollmaus 2</a></noscript>
<br />Bild wird durch ein JavaScript in einem kleineren Fenster geöffnet.
</td>
</tr>
</table>
</div>
Es wird eine Tabelle erstellt in der die Vorschaubilder dargestellt werden. Die Tabellenzellen erhalten eine StyleSheet Klasse zugewiesen um die Bilder unten rechts in der Tabellenecke darzustellen. Dieses dient hier nur zur Demonstration.
Interessant ist jetzt der Link mit dem das große Bild aufgerufen wird.
Durch die Anweisung javascript:Zeigen('Pfad/Bild'XX,YY) wird unsere JavaScript-Funktion Zeigen aufgerufen und die Werte (Bild, Breite, Hoehe ) an das JavaScript übergeben.
Wichtig ist auch der noscript-Tag (engl. Kein Script). Dort wird für die Browser die kein JavaScript aktiv haben eine Alternative angeboten um das Bild ebenfalls sehen zu können.
Eine solche Alternative sollte man immer bieten wenn man mit JavaScripten arbeitet. Ganz besonders dann, wenn das JavaScript eine wichtige Funktion für die Webseite übernimmt.
In unserer StyleSheet-Datei ist noch die Klasse .untenrechts zu ergänzen.
.fuss
{
background-color:#5e6061;
text-align:center;
}
.untenrechts { vertical-align:bottom; text-align:right; background-color:#686565; padding:10px}
Nun, wenn alles richtig gemacht ist, sollten sich die Grafiken in einem neuen Fenster öffnen. JavaScript muss natürlich im Browser aktiv sein.
Tauchen Fehler auf, so kann man mit der im Netscape/Mozilla/Firefox eingebauten JavaScriptKonsole auf Fehlersuche gehen.
Unser Projekt können wir uns hier noch einmal ansehen.
Seite erstellt von www.web-beckum.de - Letzte Änderung: 08.10.2006 16:41:53