Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

onMouseOver / Morph-Effekte

Schwierigkeit: für Anfänger

 

JavaScript-Lupe:

Buttons mit Morph-Effekt 1:

Buttons mit Morph-Effekt 2:

Beschreibung:

Ein Bereich von JavaScript der seit jeher zu gefallen weiß sind einfache Mouse-Over Effekte für 'Image'-Tags im HTML.
Andere Skripte (einige Beispiele werden sie auch auf dieser Homepage finden) modifizieren das 'Source'-Attribut und erzeugen so bspw. mehrstufige Buttons. Wir werden stattdessen dynamisch zur Laufzeit die Größe des geladenen Bildes verändern. Dabei werden wir zunächst eine Lupenfunktion integrieren und danach ein Skript für einzelne Dateien und schließlich für ganze Menüstrukturen entwickeln, dass angewählte Menüpunkte zur Laufzeit "pulsieren" lässt.

Lupe:

Die Attribute 'Width' und 'Height' des 'img'-Tags sind für Höhe und Breite eines Bildes verantwortlich...

<img src="Quelldatei" height="Höhe in Pixel" width="Breite in Pixel">

Nun wollen wir die Größe des Bildes um 50 Prozent erhöhen, wenn die Maus darauf zeigt:

<img id="myImage" src="Quelldatei"
  onMouseOver= "height=height*1.5;width=width*1.5;"
  onMouseOut  = "height=height/1.5;width=width/1.5;"
height="Höhe in Pixel" width="Breite in Pixel">

Innerhalb eines Tags beziehen wir uns (wenn nichts anderes angegeben ist) immer auf das aktuelle (durch den HTML-Tag beschriebene) Objekt. (Die Eigenschaften heißen in JavaScript für gewöhnlich genauso wie die Attribute.)

Beispiel:

Mit der Vergrößerung verschiebt sich der nachfolgende Text - sinnvoll ist es also, bereits vorher ausreichend Platz, zum Beispiel mit einer Tabelle, zu reservieren.

<table height="Bildgrösse+50%" width="Bildgrösse+50%">
 <td align="center valign="middle>
  <img src="Quelldatei"
  onMouseOver= "height=height*1.5;width=width*1.5;"
  onMouseOut  = "height=height/1.5;width=width/1.5;"
  height="Höhe in Pixel" width="Breite in Pixel">
</td></table>

Beispiel:

Morph-Effekt für einzelne Buttons:

Um das Bild über unser Skript ansprechen zu können, braucht es einen bekannte Adresse (oder auch Namen, bzw. ID) Das erreichen wir, indem wir es in einem Pseudoformular kapseln und eine eindeutige ID zuordnen.

<table height="Bildgrösse+50%" width="Bildgrösse+50%">
<form name="myPseudoForm">
 <td align="center valign="center">
  <img id="myImage" src="Quelldatei"
  onMouseOver= "height=height*1.5;width=width*1.5;"
  onMouseOut  = "height=height/1.5;width=width/1.5;"
  height="Höhe in Pixel" width="Breite in Pixel">
 </td>
</form>
</table>

Anmerkung: Statt dem Attribut 'id' können sie auch das Attribut 'name' verwenden. Beide sind gültig, wobei 'id' i. A. zu bevorzugen ist.

Kommen wir zum Skript:

<SCRIPT language="JavaScript">
 <!--

var timer;

function zoomIn()
{
 with(document.myPseudoForm.myImage) {
 heigth = heigth*1.5;
 width =  width*1.5;
 timer = setTimeout("zoomOut();", 50);
 }
};

function zoomOut()
{
 with(document.myPseudoForm.myImage) {
 heigth = heigth/1.5;
 width = width/1.5;
 timer = setTimeout("zoomIn();", 50);
 };

 //-->
</SCRIPT>

Wie sie sehen, verwenden wir die "Adresse" des Image-Objekts nun, um außerhalb des Objekts die Größe zu ändern. Die Funktion "setTimeout(Programmcode, Verzögerung)" ist in der Praxis eine der wichtigsten Funktionen und wird ihnen noch häufiger begegnen. Sie führt ein Stück Programmcode um eine bestimmte Anzahl Millisekunden versetzt aus und liefert einen ID-Wert zurück, welcher den Prozess beschreibt. Mit Hilfe von "clearTimeout(ID-Wert)" können sie die Ausführung eines mit "setTimeout()" in die Warteschleife geschickten Programmfragments abbrechen.

Anmerkung: Die Angabe von 'document' bei der Adressierung des Objektes ist nur im Internet Explorer optional. Netscape Browser setzen die vollständige Adresse voraus.

<table height="Bildgrösse+50%" width="Bildgrösse+50%">
<form name="myPseudoForm">
 <td align="center valign="center">
  <img id="myImage" src="Quelldatei"
    onMouseOver= "zoomIn();"
   onMouseOut  = "clearTimeout(timer);"
    height="Höhe in Pixel" width="Breite in Pixel">
  </td>
</form>
</table>

Seien wir etwas anspruchsvoller und entwickeln aus dem Skript eine komplette Animation... Dazu erweitern wir unsere Funktionen ein wenig. 

var timer;

function zoomIn()
{
  if (window.i < 10) {
   document.myPseudoForm.myImage.heigth = document.myPseudoForm.myImage.heigth+1;
  document.myPseudoForm.myImage.width = document.myPseudoForm.myImage.width+1;
   window.i++;
  timer = setTimeout("zoomIn();", 50);
 } else {
  window.i=0;
  timer = setTimeout("zoomOut();", 50);
 };
 };

function zoomOut()
{
 if (window.i < 10) {
   document.myPseudoForm.myImage.heigth = document.myPseudoForm.myImage.heigth-1;
  document.myPseudoForm.myImage.width = document.myPseudoForm.myImage.width-1;
   window.i++;
  timer = setTimeout("zoomOut();", 1);
 } else {
  window.i=0;
  timer = setTimeout("zoomIn();", 1);
  };
};

In gewisser Weise simulieren wir mit diesen Skripten 2 'For'-Schleifen. Einmal vergrößern wir das Objekt schrittweise um 10 Pixel, danach verkleinern wir das Objekt wieder. Eine feste Größe verwenden wir deswegen, weil die Animation bei großflächigen Bildern sonst 'ewig' dauern würde. Wir wollen einen Effekt und nicht wie gerade eben eine Lupe. Dass wir das 'Window'-Objekt zum speichern unserer Variablen 'missbrauchen' hat mit dem Garbage-Collector von JavaScript zu tun. Würden wir nicht so verfahren, würde dieser die von uns belegten Variablen nach jedem Durchlauf leeren. Alternativ kann man natürlich auch eine globale Variable definieren...
Bleibt die Aufgabe, dass Objekt anschließend wieder auf die Normalgröße zurück zu bringen.

function resetSize()
{
 document.myPseudoForm.myImage.heigth= window.myImagey;
 document.myPseudoForm.myImage.width= window.myImagex;
};

Am Image-Objekt sind nur ein paar kleinere Änderungen nötig: 

<table>
<form name="myPseudoForm">
 <td align="center valign="middle"
  height="Bildgrösse+50%" width="Bildgrösse+50%">
   <img id="myImage" src="Quelldatei"
    onMouseOver= "window.myImagex=width;
    window.myImagey=height; window.i=0; zoomIn();"
    onMouseOut  = "clearTimeout(timer); resetSize();"
    height="Höhe in Pixel" width="Breite in Pixel">
 </td>
</form>
</table>

Wir haben lediglich die Variablen initialisiert und uns so die ursprüngliche Größe des Bilds gemerkt um es später wieder auf Normalgröße bringen zu können (siehe Funktion 'resetSize()'). 'window.i' ist lediglich der Zähler, der vor dem Aufruf der Funktion zurückgesetzt wird.

Beispiel:

Zum Test probieren sie einmal Folgendes: ändern sie 'window.i=0' auf 'window.i=5' und ändern sie die Funktion 'zoomIn()' so, dass die sie die Breite vergrößert und die Höhe verringert, die Funktion 'zoomOut()' entsprechend umgekehrt...

Beispiel:

Morph-Effekt für mehrere Buttons:

Viel fehlt uns nicht mehr, um im nächsten Schritt mit einem einzigen Skript eine ganze Menüleiste zu animieren. Dazu bedienen wir uns einer indirekten Methode. Natürlich wäre es schön, wenn wir einer Funktion die Adresse des zu animierenden Objekts übergeben könnten. Das funktioniert aber nicht, weil dieser Parameter nur lokal wäre und zum Aufruf der Methode 'setTimeout' nicht mehr zur Verfügung stehen würde. Da wir also ohnehin auf einen globalen Wert zurückgreifen müssen, geben wir uns bisweilen mit dem einfacheren Weg zufrieden. Ein parameterloses Skript - dass wir vom Beispiel weiter oben vollständig und ohne Änderung übernehmen können.

Alles was zu tun ist: die 'ID' (also die Adresse) des gewünschten Objekts muss zur Laufzeit passend gemacht werden. Nachteil: Animationen von mehr als 1 'Image'-Objekt gleichzeitig sind nicht möglich.

<table>
<form name="myPseudoForm">
 <tr><td align="center valign="center"
  height="Bildgrösse+50%" width="Bildgrösse+50%">
 <!-- #1 -->
  <img id="" src="Quelldatei"
  onMouseOver= "id='myImage'; window.myImagex=width;
                window.myImagey=height; window.i=0; zoomIn();"
  onMouseOut  = "clearTimeout(timer); resetSize(); id='';"
  height="Höhe in Pixel" width="Breite in Pixel">
 </tr></td>
 <tr><td align="center valign="center"
  height="Bildgrösse+50%" width="Bildgrösse+50%">
  <!-- #2 -->
  <img id="" src="Quelldatei"
  onMouseOver= "id='myImage'; window.myImagex=width;
                window.myImagey=height; window.i=0; zoomIn();"
  onMouseOut  = "clearTimeout(timer); resetSize(); id='';"
  height="Höhe in Pixel" width="Breite in Pixel">
 </tr></td>
 <tr><td align="center valign="center"
  height="Bildgrösse+50%" width="Bildgrösse+50%">
  <!-- hier folgen evtl. weitere Einträge -->

 <!-- … -->
 </tr></td>
</form>
</table>

Über diesen simplen Trick haben wir jetzt eine ganze Menüleiste mit Morph-Effekt.

Eintrag 1
Eintrag 2
Eintrag 3
Eintrag 4
Eintrag 5
 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: