Die roll over Effekte sind wohl die am meisten verbreitetsten
Effekt überhaupt. Jeder kennt sie. Interessanter werden
sie noch, wenn das Bewegen der Maus gleich mehrere Effekte
auslöst, wie dieses Beispiel zeigt. Dieses Beispiel
über einen button, wird sowohl der button selbst als
auch das Bild unterhalb der Menüleiste ausgetauscht.
Zusätzlich wird noch ein kleine Funktion in Marsch
gesetzt, die vor sich hinblinkt. Clickt man auf einen button,
wird eine neue Seite aufgeblendet. Damit man weiss, wo man
sich gerade befindet, wird der entsprechende Menüpunkt
markiert. Wer will, kann sich das Beispiel hier
downloaden.
| Bilder
dynamisch austauschen |
|
JavaScript verwaltet die Bilder in einem Frame. Jedes Element
dieses Frames ist eine Instanz des image Objektes. Jede
Instanz des Image Objektes hat nun die Eigenschaften und
Methoden, die auch auch das Image Objekt hat. Das Image
Objekt hat zum Beispiel die Eigenschaft src, also den source
code, den Pfad, wo das Bild liegt. Diesen Pfad nun kann
man dynamisch austauschen und damit ein anderes Bild einblenden.
Betrachten wir nochmal ein Beispiel, das wir an anderer
Stelle schon hatten.
Der dazugehörige Quellcode sieht dann
so aus.
<script language="javaScript">
function wegblend()
{
document.images[0].src="beispiele/hallo.gif";
}
function reinblend()
{
document.images[0].src="beispiele/sonne.gif";
}
</script>
<img src=beispiele/sonne.gif onMouseOver="wegblend()";
onMouseOut="reinblend()";>
Der Array images als Kindobjekt von document
hält, wie bereits gesagt, alle Bilder einer Seite.
document.images[0] ist also das erste Bild. Zu beachten
ist, dass document.images[0] mit dem physikalischen Bild
nichts zu tun hat. Der Array images verweist lediglich auf
die einzelnen img tags des documentes. Das Vorgehen ist
also relativ simpel. Wenn wir mit der Maus über das
Bild fahren, wird der event handler onMouseOver aktiviert,
welcher die Funktion wegblend aufruft. Diese wiederum weist
der Eigenschaft src dieser Instanz des Bildobjektes einen
neuen Wert zu. Verlässt die Maus das Bild, wird die
Funktion wegblend() aufgerufen, die wieder den ursprünglichen
Zustand herstellt. Das Beispiel hätte in der Praxis
ein kleines Problem. Der roll over Effekt ist nur dann optisch
gelungen, wenn sich das neue Bild ohne Verzögerung
einblendet. Dies würde aber zumindest beim erstenmal
nicht passieren, da es ja erstmal heruntergeladen werden
muss. Eine Lösung für dieses Problem sieht so
aus.
<script languag=javascript>
var sonne = new Image();
var hallo = new Image();
sonne.src="beispiele/sonne.gif";
hallo.src="beispiele/hallo.gif";
function wegblend2()
{
document.images[1].src=hallo.src;
}
function reinblend2()
{
document.images[1].src=sonne.src;
}
</script><br>
<img src=beispiele/sonne.gif onMouseOver="wegblend2()";
onMouseOut="reinblend2()";>
Das bewirkt das gleiche wie das Beispiel oben, allerdings
mit dem Unterschied, dass dieses Beispiel immer funktionniert.
In diesem Beispiel kreieren wir also erstmal ein Objekt vom
Typ image. Auch diese Instanz des image Objektes hat natürlich
wieder die Eigenschaft src, also source code. Dieses image Objekt
wird sofort aufgerufen, wenn die HTML Seite aufgerufen wird
und auch die Zuweisung eines Wertes für src erfolgt völlig
unabhängig von der Frage, ob das Bild überhaupt tatsächlich
irgendwann gebraucht wird. Wenn wir jetzt in der Funktion wegblend2()
bzw. reinblend2() nicht den Pfad zum Bild direkt angeben sondern
den Wert der Eigenschaft src des oben instanziierten Bildobjektes,
ist dieses Bild natürlich sofort da.
Noch eine kleine Nebenbemerkung. Man kann die Bilder auch
mit einem Namen versehen und sie dann über den Namen
ansprechen.
<script languag=javascript>
var sonne = new Image();
var hallo = new Image();
sonne.src="beispiele/sonne.gif";
hallo.src="beispiele/hallo.gif";
function wegblend3()
{
document.images.sonnig.src=hallo.src;
}
function reinblend3()
{
document.images.sonnig.src=sonne.src;
}
</script><br>
<img src=beispiele/sonne.gif onMouseOver="wegblend3()";
onMouseOut="reinblend3()"; name=sonnig><br>
Das Resultat ist wieder das gleiche wie oben, so dass wir
es nicht nochmal "live" zeigen müssen. Man
achte aber auf den Unterschied. Das Bild hat jetzt einen
Namen, nämlich sonnig, über den wir es dann ansprechen
(document.images.sonnig.src=hallo.src etc.).
|
Irgend ein x-beliebiges Bild austauschen |
|
Bis jetzt haben wir immer das Bild ausgetauscht, welches
sich unter der Maus befand. Wir können aber natürlich
auch jedes x-beliebige Bild der Website austauschen, wie
dieses Beispiel zeigt.
Was ist die Leibspeise des anspruchsvollen Gourmets ?
Der Skript,der dieses Schauspiel veranstaltet
sieht so aus.
<script language=javascript>
var nahrung=new Image();
nahrung.src="button/mus.gif";
var frage=new Image();
frage.src="button/Nahrung1.gif";
function aendern()
{
document.images.leibspeise.src=nahrung.src;
}
function aendern2()
{
document.images.leibspeise.src=frage.src;
}
</script>
<div style="font-family:Tahoma;font-size:16px;font-weight:bold;width:450;height:20;text-decoration:underline;"
onMouseOver="aendern()"; onMouseOut="aendern2()";>
Was ist die Leibspeise des anspruchslosen Gourmets ? </div><img
src=button/Nahrung1.gif name=leibspeise>
Auch das Funktionniert erst mit Explorer ab Version 5 und
Netscape aber Version 6, da Netscape in den Vorgänger
Versionen div nicht kennt. Anstatt über den Namen hätte
man das Bild auch über die Nummer ansteuern können.
Da wir bist jetzt 3 Bilder in der Seite haben, wäre es
die Nummer zwei gewesen.
Sehr häufig sieht man auch Effekte dieser Art.
Dieser Text ist zuerst schwarz, dann rot, dann blau
Dieser Text ist zuerst schwarz, dann grün, dann brown
Dieser Text ist zuerst schwarz, dann gelb, dann magenta
Der Quelltext hierzu sieht dann so aus.
<div id="Text1" style="font-family:Tahoma;font-size:16px;font-weight:bold;"
onMouseOver=document.getElementById("Text1").style.color='red'
onMouseout=document.getElementById("Text1").style.color='blue'>
Dieser Text ist zuerst schwarz, dann rot, dann blau</div>
<div id="Text2" style="font-family:Tahoma;font-size:16px;font-weight:bold;"
onMouseOver=document.getElementById("Text2").style.color='green'
onMouseout=document.getElementById("Text2").style.color='brown'>
Dieser Text ist zuerst schwarz, dann grün, dann brown</div>
<div id="Text3" style="font-family:Tahoma;font-size:16px;font-weight:bold;"
onMouseOver=document.getElementById("Text3").style.color='yellow'
onMouseout=document.getElementById("Text3").style.color='magenta'>
Dieser Text ist zuerst schwarz, dann gelb, dann magenta</div>
Hier wird eine Syntax verwendet, die beide Browser, sowohl
Netscape 6.0 als auch Explorer 6.0 verstehen. Beide Browser
haben noch eine eigene,proprietäre Syntax, auf die hier
nicht eingegangen wird. Das Objekt document kennt die Methode
getElementbyId(). Als Parameter übergeben wir die Id
des Elementes, dass wir rausfischen wollen. In dem hier zugrunde
liegenden DOM Ansatz hat dieses Element wiederum das Kindobjekt
style welches wiederum Eigenschaften hat, z.B. color. (Näheres
dazu im Kapitel Cascading Style Sheets). Der Eigenschaft color
weisen wird dann in Abhängigkeit vom event handler jeweils
einen neuen Wert zu.
| Mehrere
Eigenschaften auf einmal ändern |
|
In dem Beispiel oben wurde nur die Farbe geändert.
Mehrere Eigenschaften auf einmal ändern ist in einem
Spezialfall ziemlich einfach, nämlich dann, wenn es die
Schrift eines Hyperlinks ist, die geändert werden soll.
Der Skript, der uns dieses Kunstwerk auf den Schirm setzt
sieht so aus.
<style type="text/css">
.banane A:link {text-decoration:none;color:brown;}
.banane A:hover {text-decoration: underline overline; color:
red;font-family:Tahoma;font-size:16px;font-weight:bold;}
.kirsche A:link {background-color:blue;text-decoration:none;color:yellow;}
.kirsche A:hover {background-color:yellow;text-decoration:
underline overline; color:blue;font-family:Tahoma;font-size:16px;font-weight:bold;}
</style>
<script language="javaScript">
function aufblenden5()
{
fenster2=window.open("","fenschterle",
'width=300,height=100,scrollbars=yes');
fenster2.document.open();
fenster2.document.write("Hello to you, friends of peace");
fenster2.document.close();
fenster2.focus();
}
</script>
<div class="banane">
<A href=javascript:aufblenden5()>Kannste clicken, wirste
glücklich</a>
</div>
<div class="kirsche">
<A href=javascript:aufblenden5()>Kannste auch clicken,
wirste noch glücklicher</a>
</div>
Wie deutlich zu erkennen, basiert diese Lösung
ausschliesslich auf css. Der JavaScript blendet lediglich
das Fenster auf. Etwas komplizierter wird die Sache, weil
wir uns wünschen, dass der roll over Effekt für
jeden Hyperlink anders aussieht und insbesondere wünschen
wir uns nicht, dass er für alle Hyperlinks der Seite
gilt.
Deshalb müssen wir zwei Klassen bilden, nämlich
banane und kirsche. Die zwei Hyperlinks kapseln wir dann mit
Hilfe des div tags in diese zwei Klassen, mit der
Wirkung, dass für den einen Hypelink die Klasse banane
gilt und für den anderen die Klasse Kirsche.
