File: images.htm

package info (click to toggle)
selfhtml 8.1.2-1
  • links: PTS
  • area: non-free
  • in suites: bullseye, buster, jessie, jessie-kfreebsd, squeeze, stretch, wheezy
  • size: 28,076 kB
  • ctags: 4,161
  • sloc: xml: 614; java: 375; makefile: 8
file content (559 lines) | stat: -rw-r--r-- 42,895 bytes parent folder | download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Objektreferenz / images</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description"    content="Welche Aufgaben, Eigenschaften und Methoden das images-Objekt in JavaScript hat.">
<meta name="keywords"       content="SELFHTML, JavaScript, Objekte, images, border, complete, height, hspace, length, lowsrc, name, src, vspace, width, handleEvent">
<meta name="author"         content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots"         content="noindex, nofollow">
<meta name="DC.Publisher"   content="SELFHTML e. V.">
<meta name="DC.Date"        content="2005-11-11T14:43:42+01:00">
<meta name="DC.Identifier"  content="http://de.selfhtml.org/javascript/objekte/images.htm">
<meta name="DC.Language"    content="de">
<meta name="DC.Rights"      content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype"  content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Objektreferenz" href="index.htm">
<link rel="next" title="embeds" href="embeds.htm">
<link rel="prev" title="options" href="options.htm">
<link rel="first" title="Hinweise zur JavaScript-Objektreferenz" href="hinweise.htm">
<link rel="last" title="Objektunabhngige Funktionen" href="unabhaengig.htm">
</head>
<body>

<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="index.htm">Objektreferenz</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">images</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p><img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#allgemeines">images: Allgemeines zur Verwendung</a></p>

<h3>Eigenschaften:</h3>

<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#border">border</a> (Rahmen)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#complete">complete</a> (Ladezustand)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#height">height</a> (Hhe)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#hspace">hspace</a> (horizontaler Abstand)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#length">length</a> (Anzahl Grafiken)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#lowsrc">lowsrc</a> (Vorschaugrafik)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#name">name</a> (Name)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#src">src</a> (Grafikdatei)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#vspace">vspace</a> (vertikaler Abstand)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#width">width</a> (Breite)<br>
</p>

<h3>Methode:</h3>

<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#handle_event">handleEvent()</a> (Ereignis verarbeiten)<br>
</p>


</td>
</tr><tr><td colspan="2" class="doc">&nbsp;<a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>&nbsp;</td></tr>
</table>



<h2><a class="an" name="allgemeines">images: Allgemeines zur Verwendung</a></h2>

<p>Mit dem Objekt <code>images</code>, das in der JavaScript-Objekthierarchie unterhalb des <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="document.htm">document</a>-Objekts liegt, haben Sie Zugriff auf alle <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../html/grafiken/einbinden.htm">Grafiken</a>, die in einer HTML-Datei definiert sind. Dabei knnen Sie auch vorhandene Grafiken dynamisch durch andere ersetzen.</p>

<p>Ein neues Grafik-Objekt wird automatisch erzeugt, wenn der Web-Browser eine <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel">&nbsp;<a href="../../html/grafiken/index.htm">Grafik</a> in der HTML-Datei vorfindet.</p>

<p>Es stehen folgende Arten zur Verfgung, mit JavaScript eine bestimmte Grafik anzusprechen:</p>

<h3 class="xmp">Schema 1 / Beispiel 1:</h3>

<pre>
document.images[#].Eigenschaft
document.images[#].Methode()

Hoehe = document.images[0].height;
</pre>

<h3 class="xmp">Schema 2 / Beispiel 2:</h3>

<pre>
document.images.Bildname.Eigenschaft
document.images.Bildname.Methode()

Hoehe = document.images["Portrait"].height;
</pre>

<h3 class="xmp">Schema 3 / Beispiel 3:</h3>

<pre>
document.images["Bildname"].Eigenschaft
document.images["Bildname"].Methode()

Hoehe = document.images["Portrait"].height;
</pre>

<h3 class="xmp">Schema 4 / Beispiel 4:</h3>

<pre>
document.Bildname.Eigenschaft
document.Bildname.Methode()

Hoehe = document.Portrait.height;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Grafikobjekte knnen Sie auf zwei Arten ansprechen:</p>

<ul>
<li>mit einer Indexnummer (wie in Schema 1 / Beispiel 1)<br>
Bei Verwendung von Indexnummern geben Sie <code>document.images</code> an und dahinter in eckigen Klammern, die wie vielte Grafik in der Datei Sie meinen. Jede Grafik, die in HTML mit dem <code>&lt;img&gt;</code>-Tag notiert wurde, zhlt. Beachten Sie, dass der Zhler bei 0 beginnt, d.h. die erste Grafik sprechen Sie mit <code>images[0]</code> an, die zweite Grafik mit <code>images[1]</code> usw. Beim Zhlen gilt die Reihenfolge, in der die <code>&lt;img&gt;</code>-Tags in der Datei notiert sind.</li>
<li>mit dem Namen der Grafik (wie in Schema 2 / Beispiel 2)<br>
Dabei wird die Grafik als Unterobjekt von <code>document.images</code> angesprochen. Notieren Sie <code>document.images</code>, dahinter einen Punkt zum Ansprechen des Unterobjekts und schlielich den Namen, den Sie bei der Definition der Grafik im einleitenden <code>&lt;img&gt;</code>-Tag im Attribut <code>name</code> angegeben haben.</li>
<li>mit dem Namen der Grafik als Indexnamen (wie in Schema 3 / Beispiel 3)<br>
Diese Art ist eine zu Schema 2 quivalente Schreibweise, denn in JavaScript ist das Ansprechen von Unterobjekten ber <code>objekt.unterobjekt</code> gleichwertig zu <code>objekt["unterobjekt"]</code>. Dabei notieren Sie wie beim Ansprechen mit Indexnummer hinter <code>document.images</code> eckige Klammern. Innerhalb der eckigen Klammern notieren Sie in Anfhrungszeichen den Namen, den Sie bei der Definition der Grafik im einleitenden <code>&lt;img&gt;</code>-Tag im Attribut <code>name</code> angegeben haben. Diese Schreibweise ist vor allem zum Zugriff auf Grafiken ntzlich, deren Namen Sonderzeichen enthalten, welche den Zugriff nach Schema 2 unmglich machen. Sie knnen zwischen den eckigen Klammern auch eine String-Variable notieren, die den Grafiknamen enthlt.</li>
<li>mit dem Namen der Grafik direkt (wie in Schema 4 / Beispiel 4)<br>
Dabei geben Sie mit <code>document.Bildname</code> den Namen an, den Sie bei der Definition der Grafik im einleitenden <code>&lt;img&gt;</code>-Tag im Attribut <code>name</code> angegeben haben.</li>
</ul>

<p>Fr Grafiken, die Sie nachtrglich mit JavaScript anzeigen mchten, mssen Sie jedoch eigene neue Grafikobjekte in JavaScript erzeugen. Das ist besonders dann wichtig, wenn Sie Grafiken dynamisch durch andere Grafiken ersetzen wollen.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_new.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
Zweitbild = new Image(104, 102);
Zweitbild.src = "christa.gif";
function Bildwechsel () {
  document.images[0].src = Zweitbild.src;
}
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;p&gt;
&lt;a href="javascript:alert(Zweitbild.src)"&gt;Bildquelle ausgeben&lt;/a&gt;&lt;br&gt;
&lt;a href="javascript:alert(Zweitbild.height)"&gt;Bildhhe ausgeben&lt;/a&gt;&lt;br&gt;
&lt;a href="javascript:alert(Zweitbild.width)"&gt;Bildbreite ausgeben&lt;/a&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;img src="boris.gif" alt="Boris"&gt;&lt;br&gt;
&lt;a href="javascript:Bildwechsel()"&gt;Bild auswechseln&lt;/a&gt;
&lt;/p&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Ein neues Grafik-Objekt speichern Sie in einem selbst vergebenen Objektnamen, im obigen Beispiel in dem Namen <code>Zweitbild</code>. Hinter dem Namen folgt ein Gleichheitszeichen. Dahinter folgt das reservierte Wort <code>new</code> und der Aufruf der Objektfunktion <code>Image()</code> (erster Buchstabe grogeschrieben!).</p>

<p>Anschlieend knnen Sie mit der neu erzeugten Instanz arbeiten. So knnen Sie der Instanz ber die Objekteigenschaft <code>src</code> die Adresse einer Grafik zuordnen, im Beispiel die Datei <code>christa.gif</code>. Mit dieser Zuordnung ldt der Browser die Grafikdatei. Wenn die Datei auf einem WWW-Server liegt, kann die bertragung je nach Gre der Grafikdatei einige Zeit dauert. Da das Script derweil weiterluft, knnen Sie nicht sofort mit der Grafik arbeiten. Ob die Grafik bereits fertig geladen ist, knnen Sie ber die Eigenschaft <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#complete">complete</a> abfragen.</p>

<p>Die Funktion <code>Bildwechsel</code> im obigen Beispiel zeigt eine Anweisung, wie Sie dynamisch eine vorhandene Grafik ersetzen knnen. Als erste Grafik in der HTML-Datei wurde <var>boris.gif</var> eingebunden. Mit Hilfe der Eigenschaft <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#src">src</a> wird diese Grafik beim Klicken auf den Verweis durch <var>christa.gif</var> ersetzt.</p>

<p>Die Objektfunktion <code>Image()</code> kennt zwei optionale Parameter:<br>
<b>1.</b> <i>width</i> Breite des Bildes<br>
<b>2.</b> <i>height</i> Hhe des Bildes<br>
Diese Parameter knnen Sie beim Erzeugen des <code>Image</code>-Objektes mit angeben. Zur Demonstration wird im Beispiel die Hhe und die Breite der Grafik mit ausgegeben.<br>
Netscape 6.1 und Opera 5.12 interpretieren diese optionalen Parameter nicht und speichern jeweils den Wert 0 fr die Hhe und Breite der Grafik.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Ein Anwendungsbeispiel fr den Einsatz dynamisch austauschbarer Grafiken finden Sie in diesem Dokument: <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../beispiele/buttons.htm">Dynamische grafische Buttons</a>.</p>

<p>Gem dem HTML-spezifischen DOM greift z.B. <code>document.images.bildname</code> auf das <code>img</code>-Elementobjekt zu, mit der die Grafik eingebunden ist. Neben den hier beschriebenen Eigenschaften und Methoden knnen Sie auf diese Art weitere Eigenschaften und Methoden nutzen, die in der Referenz zum <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="htmlelemente.htm#img">img-Elementobjekt</a> aufgelistet sind.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern">&nbsp;<a class="an" name="border">border</a></h2>

<p>Speichert die Angabe zum Rahmen um eine Grafik, wie sie im attribut <code>border</code> im <code>&lt;img&gt;</code>-Tag mglich ist. Netscape speichert auch dann einen Wert, wenn die Angabe im HTML-Tag fehlt. Der Internet Explorer speichert nur dann einen Wert, wenn im HTML-Tag ein Wert angegeben ist.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_border.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;a href="javascript:alert(document.Anna.border)"&gt;
&lt;img src="anna.jpg" border="3" alt="Anna" name="Anna"&gt;
&lt;/a&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="window.htm#alert">alert()</a> der Wert ausgegeben, der im Attribut <code>border</code> angegeben ist.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Im Netscape 6.1 ist diese Angabe fehlerhaft und enthlt als Rckgabewert <code>-1</code>.<br>Das ndern der Eigenschaft <code>border</code> ist bislang nur im Internet Explorer mglich. Im Netscape 6.1 wird der bestehende Rahmen bei einer nderung entfernt.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="complete">complete</a></h2>

<p>Speichert gem Netscapes JavaScript, ob der Versuch, eine Grafik zu laden, abgeschlossen wurde. Enthlt den Wert <code>true</code>, wenn der Versuch abgeschlossen wurde, und den Wert <code>false</code>, wenn gerade versucht wird, die Grafik zu laden.die Grafik nicht oder nicht vollstndig geladen ist. Speichert gem Microsofts JScript, ob eine Grafik vollstndig geladen ist oder nicht. Enthlt den Wert <code>true</code>, wenn die Grafik fertig geladen ist, und den Wert <code>false</code>, wenn die Grafik nicht oder nicht vollstndig geladen ist.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_complete.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function BildCheck () {
  var Status = "";
  for (i = 0; i &lt; document.images.length; ++i) {
    if (document.images[i].complete == true) {
      Status = Status + "Grafik " + (i + 1) + " geladen\n";
    } else {
      Status = Status + "Grafik " + (i + 1) + " nicht geladen\n";
    }
  }
  Status = Status + document.images.length + " Grafiken im Dokument";
  alert(Status);
}
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;
&lt;img src="berthold.gif" alt="Berthold"&gt;&lt;br&gt;
&lt;img src="boris.gif" alt="Boris"&gt;&lt;br&gt;
&lt;img src="bernd.gif" alt="Bernd"&gt;&lt;br&gt;
&lt;a href="javascript:BildCheck()"&gt;Grafiken checken&lt;/a&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel enthlt mehrere Grafiken und einen Verweis. Beim Anklicken des Verweises wird die Funktion <code>BildCheck()</code> aufgerufen, die im Dateikopf in einem Script-Bereich definiert ist. Diese Funktion ermittelt in einer for-Schleife fr jede einzelne Grafik in der Datei (ermittelbar mit <code>document.images.length</code>), ob diese geladen ist (<code>if (document.images[i].complete == true)</code>) oder nicht. Das Ergebnis wird in einer Variablen <code>Status</code> gesammelt. Am Ende wird der Inhalt von <code>Status</code> mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="window.htm#alert">alert()</a> ausgegeben.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Die Eigenschaft <code>complete</code> wird von den Browsern unterschiedlich interpretiert, je nachdem, ob sie der Definition von Netscape oder Microsoft folgen. Netscape ab Version 6, Mozilla Firefox und Konqueror folgen der Netscape-Definition. Obwohl im vorliegenden Beispiel zwei Grafiken nicht geladen werden knnen, hat die Eigenschaft <code>complete</code> fr alle Grafiken den Wert <code>true</code>. Die lteren Netscape-Browser bis zur Version 4 geben fr alle Grafiken den Wert <code>false</code> an. Der Internet Explorer und Opera folgen der Microsoft-Definition: Die korrekt geladene Grafik hat den <code>complete</code>-Wert <code>true</code>, die anderen beiden nicht vorhandenen Grafiken den Wert <code>false</code>.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern">&nbsp;<a class="an" name="height">height</a></h2>

<p>Speichert die Angabe zur Hhe eine Grafik, wie sie mit dem Attribut <code>height</code> im <code>&lt;img&gt;</code>-Tag mglich ist. Es wird auch dann ein Wert gespeichert, wenn die Angabe im HTML-Tag fehlt.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_height.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;img src="christa.gif" name="Christa" alt="Christa"&gt;
&lt;script type="text/javascript"&gt;
document.write(document.Christa.name + "&lt;br&gt;");
document.write(document.Christa.width + " x " + document.Christa.height + " Pixel");
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel enthlt eine Grafik. Unterhalb davon ist ein Script-Bereich notiert. Darin wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="document.htm">document</a>.<a href="document.htm#write">write()</a> der Bildname und die Angaben zu Breite und Hhe der Grafik geschrieben.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Im Netscape 6.1, Safari und in Konqueror wird in der Eigenschaft <code>height</code> der Wert <code>0</code> gespeichert, wenn das <code>height</code>-Attribut im HTML-Tag fehlt.<br>
Das ndern der Eigenschaft <code>height</code> ist bislang nur im Internet Explorer und im Netscape 6.1 mglich.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op7.gif" width="30" height="30" alt="Opera 7" title="Opera 7"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern">&nbsp;<a class="an" name="hspace">hspace</a></h2>

<p>Speichert die Angabe zum horizontalen Abstand zwischen einer Grafik und ihren nebenliegenden Elementen, wie sie mit dem Attribut <code>hspace</code> im <code>&lt;img&gt;</code>-Tag mglich ist. Wenn die Angabe im HTML-Tag fehlt, hat die Objekteigenschaft <code>hspace</code> den Wert 0.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_hspace.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;a href="javascript:alert(document.Dorian.hspace)"&gt;
&lt;img src="dorian.jpg" hspace="30" name="Dorian" alt="Dorian"&gt;
&lt;/a&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="window.htm#alert">alert()</a> der Wert ausgegeben, der im Attribut <code>hspace</code> angegeben ist.</p>

<h3 class="inf">Beachten Sie: </h3>

<p>Netscape 6.1 und Opera 5.12 interpretieren diese Angabe fehlerhaft. Im Netscape 6.1  ist stets <code>-1</code> und in Opera 5.12 <code>0</code> gespeichert.<br>
Das ndern der Eigenschaft <code>hspace</code> ist bislang nur im Internet Explorer mglich. Im Netscape 6.1 wird der horizontale Abstand entfernt.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="length">length</a></h2>

<p>Speichert die Anzahl der Grafiken in einer Datei.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_length.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;img src="anna.jpg" alt="Anna"&gt;&lt;br&gt;
&lt;img src="dorian.gif" alt="Dorian"&gt;&lt;br&gt;
&lt;img src="christa.gif" alt="Christa"&gt;&lt;br&gt;
&lt;script type="text/javascript"&gt;
document.write("&lt;hr&gt;Seite enthlt " + document.images.length + " Grafiken");
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt mehrere Grafiken. Am Ende steht ein Script-Bereich. Darin wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="document.htm">document</a>.<a href="document.htm#write">write()</a> die Anzahl der Grafiken in die Datei geschrieben.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="lowsrc">lowsrc</a></h2>

<p>Speichert die Angabe zur Vorabgrafik, wie sie mit dem Attribut <code>lowsrc</code> im <code>&lt;img&gt;</code>-Tag mglich ist. Wenn die Angabe im HTML-Tag fehlt, enthlt die Objekteigenschaft <code>lowsrc</code> keinen Wert. Wenn ein <code>lowsrc</code>-Attribut angegeben ist, enthlt die Objekteigenschaft bei Netscape der vollstndige URI, beim Internet Explorer, Netscape 6 und Opera dagegen genau die Angabe, die in der Wertzuweisung an das HTML-Attribut steht.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_lowsrc.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;a href="javascript:alert(document.images[0].lowsrc)"&gt;
&lt;img src="xanta.jpg" lowsrc="xantalow.jpg" alt="Fr&amp;auml;aenzschen und Franz"&gt;
&lt;/a&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt eine Grafik, die mit dem <code>lowsrc</code>-Attribut eine vorab anzuzeigende Grafik definiert, und die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="window.htm#alert">alert()</a> der Wert ausgegeben, der im Attribut <code>lowsrc</code> gespeichert ist.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jsread.gif" width="60" height="30" alt="Lesen">&nbsp;<a class="an" name="name">name</a></h2>

<p>Speichert den Namen einer Grafik, wie er mit dem Attribut <code>name</code> im <code>&lt;img&gt;</code>-Tag mglich ist. Wenn die Angabe im HTML-Tag fehlt, enthlt die Objekteigenschaft <code>name</code> keinen Wert.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_name.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;img name="Anna" src="anna.jpg" width="271" height="265" border="0" alt=""&gt;
&lt;script type="text/javascript"&gt;
document.write("&lt;br&gt;" + document.images[0].name);
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt eine Grafik. Unterhalb davon ist ein Script-Bereich notiert. Darin wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="document.htm">document</a>.<a href="document.htm#write">write()</a> der Bildname der Grafik in die Datei geschrieben.</p>

<h3 class="inf">Beachten Sie: </h3>

<p>Im Netscape 6.1 knnen Sie die Eigenschaft <code>name</code> auch ndern.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern">&nbsp;<a class="an" name="src">src</a></h2>

<p>Speichert die Angabe, welche Grafikdatei angezeigt wird, wie sie mit dem Attribut <code>src</code> im <code>&lt;img&gt;</code>-Tag mglich ist. Diese Eigenschaft lsst sich ndern. Dadurch knnen Sie Grafiken dynamisch durch andere ersetzen. Beachten Sie jedoch, dass Breite und Hhe ursprnglich in HTML notierten Grafik fr alle dynamisch folgenden Grafiken bernommen werden. Um verzerrungsfreie Effekte zu erzielen, sollten also alle Grafiken, die einander dynamisch ersetzen, die gleiche Hhe und Breite haben.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_src.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;img src="hans.gif" width="400" height="300" alt="Hans"&gt;
&lt;script type="text/javascript"&gt;
var b = new Array();
b[0] = new Image(); b[0].src = "holger.gif";
b[1] = new Image(); b[1].src = "hilmar.gif";
b[2] = new Image(); b[2].src = "heiner.gif";
b[3] = new Image(); b[3].src = "hans.gif";
var i = 0;
function Animation () {
  if (i &gt; 3)
    i = 0;
  document.images[0].src = b[i].src;
  i = i + 1;
  window.setTimeout("Animation()", 1000);
}

window.setTimeout("Animation()", 1000);
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel enthlt eine Grafik namens <code>hans.gif</code>. Unterhalb davon ist ein Script-Bereich notiert, der dafr sorgt, dass die Grafik sich automatisch jede Sekunde in eine andere Grafik verwandelt. Dazu wird zunchst ein <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="array.htm">Array</a> namens <code>b</code> notiert. Danach werden vier Elemente des Arrays <code>b</code> bestimmt. In allen vier Fllen handelt es sich um neue Grafikobjekte. Jedem der neuen Grafikobjekte wird mit der Eigenschaft <code>src</code> eine Grafikdatei zugewiesen. Beachten Sie, dass auch die Datei <code>hans.gif</code> wieder dabei ist, obwohl diese bereits angezeigt wird. Da sie in die Animation integriert werden soll, muss fr sie aber trotzdem noch mal ein eigenes neues Grafikobjekt erzeugt werden.</p>

<p>Innerhalb der Funktion <code>Animation()</code>, die unterhalb der Funktion zum ersten Mal aufgerufen wird. wird das jeweils aktuelle Bild durch ein anderes ersetzt. Das geschieht durch Zuweisung von <code>b[i].src</code> an <code>document.images[0].src</code>. Da <code>b[i]</code> abhngig von der Variablen <code>i</code> ist, die bei jedem Funktionsaufruf verndert wird, wird jedes mal ein anderes der vier Bilder angezeigt. Am Ende ruft sich die Funktion <code>Animation()</code> selbst wieder auf. So entsteht der Endlos-Effekt. Der Aufruf ist in einen <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="window.htm#set_timeout">setTimeout()</a>-Aufruf eingebunden, der den nchsten Aufruf jeweils um 1000 Millisekunden, also um eine Sekunde, verzgert.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Im Internet Explorer und im Netscape 6 knnen Sie auch unterschiedlich groe Grafiken verwenden. In diesem Fall sollten Sie die Angaben zur Gre der Grafik weglassen bzw. fr die Hhe die Eigenschaft <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#height">height</a> und fr die Weite die Eigenschaft <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#width">width</a> dynamisch ndern. </p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op7.gif" width="30" height="30" alt="Opera 7" title="Opera 7"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern">&nbsp;<a class="an" name="vspace">vspace</a></h2>

<p>Speichert die Angabe zum vertikalen Abstand zwischen einer Grafik und den Elementen oberhalb und unterhalb davon, wie sie mit dem Attribut <code>vspace</code> im <code>&lt;img&gt;</code>-Tag mglich ist. Wenn die Angabe im HTML-Tag fehlt, hat die Objekteigenschaft <code>vspace</code> den Wert 0.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_vspace.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;a href="javascript:alert(document.Dorian.vspace)"&gt;
&lt;img src="dorian.jpg" vspace="8" name="Dorian" alt="Dorian"&gt;
&lt;/a&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel enthlt eine Grafik, die in einen Verweis eingeschlossen ist. Beim Anklicken des Verweises wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="window.htm#alert">alert()</a> der Wert ausgegeben, der im Attribut <code>vspace</code> notiert ist.</p>

<h3 class="inf">Beachten Sie: </h3>

<p>Netscape 6.1 und Opera 5.12 interpretieren diese Angabe fehlerhaft. Im Netscape 6.1  ist stets <code>-1</code> und in Opera 5.12 <code>0</code> gespeichert.<br>
Das ndern der Eigenschaft <code>vspace</code> ist bislang nur im Internet Explorer mglich. Im Netscape 6.1 wird der vertikale Abstand entfernt.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js11.gif" width="30" height="30" alt="JavaScript 1.1" title="JavaScript 1.1"><img src="../../src/netsc3.gif" width="30" height="30" alt="Netscape 3.0" title="Netscape 3.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq33.gif" width="30" height="30" alt="Konqueror 3.3" title="Konqueror 3.3"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"><img src="../../src/jswrite.gif" width="60" height="30" alt="Lesen/ndern">&nbsp;<a class="an" name="width">width</a></h2>

<p>Speichert die Angabe zur Breite eine Grafik, wie sie mit dem Attribut <code>width</code> im <code>&lt;img&gt;</code>-Tag mglich ist. Es wird auch dann ein Wert gespeichert, wenn die Angabe im HTML-Tag fehlt.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/images_width.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;html&gt;&lt;head&gt;&lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;
&lt;img src="christa.jpg" name="Christa" alt="Christa"&gt;
&lt;script type="text/javascript"&gt;
document.write(document.Christa.name + "&lt;br&gt;");
document.write(document.Christa.width + " x " + document.Christa.height + " Pixel");
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel enthlt eine Grafik. Unterhalb davon ist ein Script-Bereich notiert. Darin wird mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="document.htm">document</a>.<a href="document.htm#write">write()</a> der Bildname und die Angaben zu Breite und Hhe der Grafik geschrieben.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Im Netscape 6.1 und Konqueror 3.1 wird in der Eigenschaft <code>width</code> der Wert <code>0</code> gespeichert, wenn diese Angabe im HTML-Tag fehlt. Konqueror 3.4 zeigt diese Einschrnkung nicht mehr.<br>Das ndern der Eigenschaft <code>width</code> ist bislang nur im Internet Explorer und im Netscape 6.1 mglich.</p>



<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>



<h2><img src="../../src/js12.gif" width="30" height="30" alt="JavaScript 1.2" title="JavaScript 1.2"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0">&nbsp;<a class="an" name="handle_event">handleEvent()</a></h2>

<p>bergibt ein Ereignis an ein Element, das in der Lage ist, auf das Ereignis zu reagieren. Funktioniert genau so wie <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="window.htm#handle_event">handleEvent() beim window-Objekt</a> (nhere Informationen siehe dort).</p>



<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
&nbsp;<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="embeds.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="embeds.htm">embeds</a>
</td></tr>
<tr>
<td class="doc"><a href="options.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="options.htm">options</a>
</td>
</tr>
<tr><td colspan="2" class="doc">&nbsp;</td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="index.htm">Objektreferenz</a></td>
</tr>
</table>

<p>&copy; 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../editorial/impressum.htm">Impressum</a></p>

</body>
</html>