Werbung einblenden Werbung ausblenden


Home / Tutorials / JavaScript Handbuch / "klassischer" roll over Effekt


roll over Effekte
Bilder dynamisch austauschen
Irgend ein x-beliebiges Bild austauschen
Ändern des Schrifttyps
Mehrere Eigenschaften auf einmal ändern

roll over Effekte

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.

Ändern des Schrifttyps

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.

vorhergehendes Kapitel