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
|
<!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 / Anwendungsbeispiele / Dynamische grafische Buttons</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie mit Hilfe von JavaScript dafr sorgen knnen, dass grafische Verweis-Buttons beim berfahren mit der Maus optisch hervorgehoben werden.">
<meta name="keywords" content="SELFHTML, JavaScript, dynamische Grafiken, image-Objekt, Mouseover-Effekt">
<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-08-22T21:21:39+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/beispiele/buttons.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="Anwendungsbeispiele" href="index.htm">
<link rel="next" title="Aufenthaltsdauer auf Web-Seite anzeigen" href="aufenthaltsdauer.htm">
<link rel="prev" title="Formulareingaben berprfen" href="formulareingaben.htm">
<link rel="first" title="Zwei Frames gleichzeitig ndern" href="zweiframes.htm">
<link rel="last" title="nderungen der Fenstergre berwachen" href="fensterueberwachen.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"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</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">Dynamische grafische Buttons</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"> <a href="#hinweise">Hinweise zu diesem Beispiel</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#quelltext">Quelltext mit Erluterungen</a><br>
</p>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/buttons.htm">Anzeigebeispiel: So sieht's aus</a></p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><a class="an" name="hinweise">Hinweise zu diesem Beispiel</a></h2>
<p>Auf WWW-Seiten kommen hufig grafische Button-Leisten zum Einsatz, die Verweise zu bestimmten Seiten des Projekts enthalten. Wenn der Anwender mit der Maus ber solche Grafiken fhrt, erkennt er am vernderten Mauszeiger und an den Verweiszielanzeigen in der Statuszeile des WWW-Browsers, dass es sich um Verweise handelt. Mit Hilfe von JavaScript knnen Sie solche grafischen Verweise jedoch noch deutlicher kenntlich machen und der Benutzerfhrung gleichzeitig ein wenig mehr Pep verleihen ("Mouseover-Effekt").</p>
<p>Dazu brauchen Sie je zwei gleichartige, farblich unterschiedliche Grafiken fr je einen Grafikbutton. Im Anzeigebeispiel zu diesem Abschnitt sind das die beiden folgenden Button-Paare:</p>
<table border="0" cellpadding="0" cellspacing="1"><tr>
<td><img src="anzeige/button1.gif" width="130" height="30" alt="Home"></td>
<td><img src="anzeige/button1h.gif" width="130" height="30" alt="Home"></td>
</tr><tr>
<td><img src="anzeige/button2.gif" width="130" height="30" alt="Helferlein"></td>
<td><img src="anzeige/button2h.gif" width="130" height="30" alt="Helferlein"></td>
</tr><tr>
<td><img src="anzeige/button3.gif" width="130" height="30" alt="Layouts"></td>
<td><img src="anzeige/button3h.gif" width="130" height="30" alt="Layouts"></td>
</tr></table>
<p>Mit Hilfe von JavaScript lsst sich nun eine Grafik durch eine andere ersetzen, zum Beispiel, wenn die Grafik als Verweises dient und der Anwender mit der Maus ber die Grafik fhrt. Wie das im einzelnen funktioniert, wird im folgenden beschrieben.</p>
<p>Dieses Beispiel funktioniert mit Netscape ab Version 3.x und mit dem Internet Explorer ab Version 4.x. Beachten Sie, dass es bei Verwendung dynamischer Grafiken in Tabellen innerhalb von Tabellen bei Netscape zu Verschiebungsproblemen kommen kann.</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/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"> <a class="an" name="quelltext">Quelltext mit Erluterungen</a></h2>
<p>Das Beispiel zeigt eine vollstndige HTML-Datei mit Button-Leiste und dem JavaScript zum Steuern der Mouseover-Effekte.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/buttons.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html>
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "button1.gif"; /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */
Normal2 = new Image();
Normal2.src = "button2.gif"; /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "button2h.gif"; /* zweite Highlight-Grafik */
Normal3 = new Image();
Normal3.src = "button3.gif"; /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "button3h.gif"; /* dritte Highlight-Grafik */
/* usw. fuer alle weiteren zu benutzenden Grafiken */
function Bildwechsel (Bildnr, Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<style type="text/css">
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p { color:#000000; font-family:Arial,sans-serif; }
</style>
</head>
<body bgcolor="#FFFFC0" background="buttonsback.gif">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">
<a href="../../../index.htm"
onmouseover="Bildwechsel(0, Highlight1)"
onmouseout="Bildwechsel(0, Normal1)"><img src="button1.gif"
width="130" height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"><img src="button2.gif"
width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="../../../layouts/index.htm"
onmouseover="Bildwechsel(2, Highlight3)"
onmouseout="Bildwechsel(2, Normal3)"><img src="button3.gif"
width="130" height="30" border="0" alt="Layouts"></a><br>
</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td valign="top">
<h1>Dynamische grafische Buttons</h1>
<p><b>Fahren Sie mit der Maus ber die Buttons. Sie drfen auch draufdrcken ;-)</b></p>
</td>
</tr>
</table>
</body>
</html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<h4>Neue Grafikobjekte fr Highlight-Grafiken erzeugen:</h4>
<p>Fr jede Grafik, die Sie dynamisch anzeigen mchten, mssen Sie eine Instanz des <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/images.htm">image-Objekts</a> erzeugen. Das gilt sowohl fr die Grafiken, die zunchst in der HTML-Datei referenziert werden, als auch fr diejenigen, die beim berfahren mit der Maus dynamisch angezeigt werden sollen.</p>
<p>Dazu wird im Beispiel mit Anweisungen wie <code>Normal1 = new Image();</code> eine Objektinstanz erzeugt. Nachdem die Objektinstanz erzeugt ist, sind unter dem gewhlten Objektnamen, im ersten Fall <code>Normal1</code>, alle Eigenschaften des Objekts ansprechbar. Zunchst enthlt das Objekt noch gar keine Daten. Mit der Anweisung <code>Normal1.src = "button1.gif";</code> wird dem neuen Grafikobjekt eine Grafikdatei zugewiesen.</p>
<p>Wiederholen Sie die beiden beschriebenen Anweisungen fr jede Grafikdatei, die von dynamischen nderungen betroffen sein wird - und zwar sowohl fr Grafiken, die im "Normalfall" angezeigt werden, als auch fr Grafiken, die beim Darberfahren mit der Maus dynamisch angezeigt werden. Vergeben Sie dabei jedesmal einen neuen Objektnamen. Im obigen Beispiel sind die entsprechenden Befehle auskommentiert, sodass Sie erkennen knnen, was an welcher Stelle definiert wird.</p>
<h4>Funktion "Bildwechsel()" zum dynamischen Austauschen von Grafiken:</h4>
<p>Der bisherige Code im Beispiel wird beim Einlesen der HTML-Datei direkt ausgefhrt, da er nicht in einer Funktion gebunden ist. Die Ausfhrung dieses Codes bewirkt aber keine sichtbaren Ausgaben und wird vom Anwender gar nicht bemerkt. Das, was am Bildschirm mit Hilfe von JavaScript passieren soll, nmlich das dynamische Austauschen eines Bildes, geschieht in der definierten <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/funktionen.htm">Funktion</a> <code>Bildwechsel()</code>.</p>
<p>Die Funktion soll aufgerufen werden, wenn der Anwender mit der Maus ber einen grafischen Verweis fhrt, und wenn er den Verweisbereich mit der Maus wieder verlsst. Dazu bentigt die Funktion zwei Parameter: die wie vielte Grafik in der Datei ausgetauscht werden soll (Parameter <code>Bildnr</code>), und durch welches zuvor definierte Grafikobjekt das Bild ersetzt werden soll (Parameter <code>Bildobjekt</code>). Die Funktion kommt dann mit einer einzigen Anweisung aus. Diese Anweisung ersetzt das vorhandene Bild durch das neue. Beachten Sie hier den wichtigen Zusammenhang: das dynamische Ersetzen einer Grafik ist nur mglich, wenn fr die neue Grafik zuvor eine Instanz des Grafikobjekts erzeugt wurde. Im Beispiel geschah dies ja ganz am Anfang des Scripts.</p>
<h4>Grafische Verweise mit Event-Handlern fr Mausbewegungen des Anwenders:</h4>
<p>Damit der gewnschte Effekt zustande kommt, mssen Sie in der HTML-Datei <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../html/grafiken/verweise.htm">Grafiken als Verweise</a> definieren.</p>
<p>Im einleitenden Verweis-Tag werden die <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../sprache/eventhandler.htm">Event-Handler</a> <code>onmouseover</code> und <code>onmouseout</code> notiert. Bei <code>onmouseover</code> (wenn der Anwender mit der Maus ber den verweis-sensitiven Bereich, hier die Grafik, fhrt) wird die im Script-Bereich definierte Funktion <code>Bildwechsel()</code> aufgerufen, ebenso bei <code>onmouseout</code> (wenn der Mauszeiger den verweis-sensitiven Bereich wieder verlsst).</p>
<p>Beim Aufruf von <code>Bildwechsel()</code> werden jeweils die beiden bentigten Parameter bergeben. Zhlen Sie dazu die referenzierten Grafikdateien in der HTML-Datei, aber fangen Sie bei 0 an zu zhlen, d.h. 0 fr die erste Grafik in der Datei, 1 fr die zweite Grafik usw. bergeben Sie den Indexwert der Grafik, die in den Verweis eingebettet ist. Im Beispiel sind in der gesamten HTML-Datei keine anderen als die dynamisch zu tauschenden Grafiken referenziert. Deshalb wird im ersten Fall 0 (erste Grafik der Datei) bergeben, im zweiten Fall 1 (zweite Grafik der Datei).<br>
Beim zweiten Parameter bergeben Sie den Objektnamen fr das gewnschte Grafikobjekt. Das ist einer der Namen, die Sie am Anfang des Script-Bereichs vergeben haben. Im Beispiel wird im ersten Fall z.B. <code>Highlight1</code> bei <code>onmouseover</code> bergeben, und <code>Normal1</code> bei <code>onmouseout</code>.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<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="aufenthaltsdauer.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"> <a href="aufenthaltsdauer.htm">Aufenthaltsdauer auf Web-Seite anzeigen</a>
</td></tr>
<tr>
<td class="doc"><a href="formulareingaben.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"> <a href="formulareingaben.htm">Formulareingaben berprfen</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </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"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Anwendungsbeispiele</a></td>
</tr>
</table>
<p>© 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
