Der MouseOver-Effekt

Weitersagen:

brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]

Der MouseOver-Effekt

von Thomas Salvador.

In diesem Artikel wird der MouseOver-Effekt erläutert, benannt nach dem JavaScript-Event, der dabei ausgenutzt wird und nach der Einsatzart.

Was passiert ist, dass sich ein Bild verändert, wenn man mit der Mouse auf dieses Bild zeigt. Häufig ist dieses Bild "heiß" --also ein Icon-- und die Veränderung gibt visuelles Feedback.

Dass dies nicht zwingend und die Lokalisation eher unwichtig ist, soll hier auch gleich gezeigt werden. Im Beispiel sehen Sie, dass das Bild überhaupt kein Icon ist. Es wird auf die Berührung eines textuellen Links reagieren. Ebenso gut könnte der Abstand zwischen beiden größer sein.

Der OnMouseOver-Effekt ist für Bilder bzw. Icons das, was der Hover-Effekt für textuelle Links ist. Er ist durch entsprechende Gründe motivitiert und günstig. Der Unterschied liegt in der Realisation. Der Hover-Effekt wird mit CSS gemacht, obwohl er auch über JavaScript realisierbar ist. Es braucht sich auch niemand zu freuen, den ob mit CSS oder über JavaScript realisiert, Hover funktioniert derzeit nur mit dem IE, während MouseOver zumindest auf IE, NS und Opera läuft.

Der Source
Die Dokumentation
Der Rahmen
Die Verwendung
Das Beispiel

Der Source

<script type="text/javascript"><!--

var out="";
var limg="";

function off() {

// onmouseOver-Effekt von Thomas Salvador, 2000, http://www.brauchbar.de
// Wiederverwendung erlaubt, solange der Hinweis vollständig und
// unveraendert erhalten bleibt. Verwendung ohne oder mit veraendertem
// Hinweis ist nicht erlaubt.
// Ein BackLink zur Site wird erbeten.

  if (out=="") { return; }

  if (document.images) {
    document.images[limg].src=out;
    out="";
  }
}

function on(img,o1,o2) {
  if (document.images) {

  if (out != "") { off(); }

    document.images[img].src=o1;
    out=o2;
    limg=img;
  }
}
//-->
</script>

Die Dokumentation

Das Script gehört in den Kopfbereich (<head>) der HTML-Datei. Die Variable limg hält jeweils den Namen des zuletzt angesprochenen Bildes, out den URL der Bilddatei für den deaktivierten Zustand.

Das Script enthält zwei Funktionen on() und off().

on() wird in der Form on(Bildname,URL1,URL2) gerufen. Befindet sich ein Bild noch im aktiven Zustand (was nur dadurch auftreten kann, dass ein onMouseOut nicht gefeuert hat), so wird es mithilfe von off() zurückgesetzt, wozu wird gleich kommen.
Durch Zuweisung wird Bild img angewiesen, die neue Bilddatei o1=URL1 (das "on"-Bild) darzustellen.
o2=URL2 ist die Bilddatei, die das Bild anzeigen soll, wenn es abgeschaltet wird. Seine Adresse wird in out vermerkt, das Bild selbst in limg. Dieses Merken ist notwendig, weil die Abschaltroutine ja erst viel später aufgerufen wird und dann erfahren können muss, welches Bild was anzeigen soll.
off() wird durch einen Event onMouseOut aktiviert, der feuert, wenn der heiße Bereich wieder verlassen wird. An off() selbst, ist nicht viel dran. Er weist Bild limg an, die Bilddatei out darzustellen. Wir erinnern uns, dass wir in limg das manipulierte Bild gesichert hatten und in out den URL, der bei der Abschaltung verwendet werden soll. Durch die Zuweisung wird das Bild dargestellt.

Die Bilder, die reagieren sollen, müssen noch benannt werden. Dies geschieht in HTML mit dem name-Attribut (s. Rahmen/Beispiel).

Der Source läuft, wie er dort steht, zumindest mit Communicator 4.05 (wahrscheinlich 4.x), IE 5, Opera 3.6. Andere wurden nicht getestet. Prinzipiell, sollte er aber keine Fehlermeldungen liefern, da er nur auf unterstützenden Browsern ausgeführt wird.

Der Rahmen

<html>
<head>
Titel und Metas usw.
... hier das Script ...
</head>
<body ...>

... Seiteninhalt ...

<img src="dummy.gif" name="bild" width="88" height="31" />
</body></html>

Die Verwendung

Wie verwendet man nun das Script genau? Beim Rahmen haben wir schon gesehen, wohin es gehört, nun zur Verwendung. Sagen wir, Sie haben ein Bild "einbild.gif" in Ihrer Seite. Also haben Sie irgendwo einen passenden <img>- Tag dafür, z.B.

<img src="einbild.gif" width=100 height=50 border="0" />

1. Schritt

Wie schon bei Rahmen gesehen, benennen wir unser Bild, der Einfachheit halber hier einfach bild.

<img src="einbild.gif" name="bild" width="100" height="50" border="0" />

2. Schritt

Nun zum Wesentlichen. Wir brauchen zwei Bilder, eines für on - es heiße hier an.gif, eines für off, wobei das off-Bild i.a. das Originalbild ist. Die onMouseXXX-Events, die die eigentlichen Funktionen aufrufen, befinden sich interessanterweise nicht im <img>-Tag, sondern in einem <a>-Tag, der das Bild für diesen Zweck oft einschließt. Dies macht Sinn, da man den Effekt i.a. dafür verwendet Feedback für die Anwahl von Icons zu geben.

<a href="URL"
   onmouseover="on('bild', 'an.gif', 'einbild.gif');"
   onmouseout ="off();">

<img src="einbild.gif" name="bild" width="100" height="50" border="0" />
</a>

Wie Sie in folgendem Beispiel noch sehen werden, ist es jedoch keineswegs erforderlich, dass das Bild eingeschlossen wird. Das dortige Bild wird durch eine Referenz manipuliert, die erst nach dem Bild kommt, also an einer anderen Stelle steht.

Das Beispiel

brauchbar.de

Diese Referenz reagiert und lässt obiges Bild zwischen

und

wechseln.

Der MouseOver-Effekt

Der Source

Die Dokumentation

Der Rahmen

Die Verwendung

1. Schritt

2. Schritt

Das Beispiel

Verwandte Artikel und Seiten