Multimediakurs Leinfelder: Inhalt/Modul 8 "Animation und Co./ 8.2 Rollovers erstellen und verwenden
(© copyright)     Letzte Änderungen:22.10.2002

Modul 8.2: Rollover-Bilder erstellen und verwenden:Position innerhalb des Kurses

Arbeitsschritt 1:

3 gleichgroße Bilder erstellen, die für Normaldarstellung, Anzeige beim Überfahren mit der Maus sowie bei Mausklick erscheinen (auf das Klickbild kann ggf. verzichtet werden).

Arbeitsschritt 2:

JavaScript für Rollover-Effekt erstellen bzw. Vorlage verwenden und in Header der html-Seite kopieren (vgl. Modul 7: JavaScript). Entsprechende Skripte finden Sie in Modul 7 (siehe hier) oder verwenden Sie die eingebauten Funktionen z.B. von GoLive oder Dreamweaver (s.u.)

Arbeitsschritt 3:

Normalbild auf Seite einbauen, mit Ziel-URL verlinken, andere beiden Bilder ebenfalls in den gleichen Ordner legen und entsprechende JavaScript-Eventhandler beim <a href>-Tag einbauen.

Erleichterungen:

  1. GoLive verwenden: hier gibt es ein extra Rollover-Objekt, welches Sie nur auf das Layout-Fenster Ihre html-Seite ziehen müssen. Im Inspektor verlinken Sie mit den drei Bildern und geben die Ziel-URL ein. Das notwendige JavaScript wird durch GoLive generiert. In GoLive 6 können Sie bereits eingebaute statische Bilder noch leichter in Rollovers umbauen. Eine nähere Beschreibung zum Vorgehen finden Sie in Kursmodul 6.2 Ähnlich funktioniert es auch unter Dreamweaver oder anderen fortgeschrittenen Webeditoren.


  1. Verwenden Sie ImageReady (Bestandteil von Photoshop 6). Hier können Sie sehr einfach die drei notwendigen Bilder für einen Rolloverbutton generieren. Beim Speichern dieser Bilder können Sie auch (unter der Option Bilder und html speichern) den entsprechenden Code für das JavaScript sowie für die Eventhandler generieren lassen und in Ihre html-Seiten kopieren.

    Nachstehend die Arbeitsschritte zur Erstellung einer einfachen Rollover-Erstellung in Image-Ready

Öffnen Sie ein Bild in Imageready oder erstellen dieses dort. In obigem Fall ist es nur ein Schriftzug in Schwarz. In der Animationspalette klicken Sie auf den Reiter Rollover (1). Unter Normal (2) sehen Sie das importierte oder soeben erstellte Bild.

Erstellen Sie einen neuen Rolloverstatus (Click auf 2a-Eselsohr-Symbol). Damit generieren Sie einen Bildstatus für den Mouseover-Status. Wenden Sie aus dem Menu Ebene beliebige Ebenenstile, wie Überlagerung mit Glanz, Farbe oder auch Schlagschatten an (Wichtig: Sie können das eigentliche Bild nicht ändern, das würde sich auch auf das Normal-Bild auswirken, sondern dieses Normalbild nur durch Ebenenstile "verfremden).

Wenn Sie wollen, können Sie auch noch einen weiteren Status für Unten (d.h. Mausklick) anlegen (4). Dieser ist jedoch nur zu sehen, falls der entsprechende Link in ein neues Fenster oder einen neuen Frame führt. Für 4 wurde z.B. eine Farbüberlagerung (5) gewählt, bei der eine violette Farbe mit Deckkraft 5% über den vorherigen Status gelegt wurde (6).

Danach speichern Sie Ihr Bild unter Optimiert Speichern unter.. Sie können gleich den html-Code mit generieren lassen. Er sieht dann etwa wie nachstehend aus. Wenn es Sie stört, können Sie die blau eingefärbten Angaben löschen. Den Link (rot) müssen Sie noch nachtragen.

Wenn Sie verschiedene Rollovers auf einer Seite einbauen, ist es besser, ohne html-code abzuspeichern und die Rollovers mit GoLive, Dreamweaver oder auch von Hand zu erstellen.

<HTML>
<HEAD>
<TITLE>interaktion_01</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (interaktion_01.gif) -->
<SCRIPT LANGUAGE="JavaScript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
interaktion_01_01_over = newImage("images/interaktion_01_01-over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF ONLOAD="preloadImages();">
<!-- ImageReady Slices (interaktion_01.gif) -->
<A HREF="#"
ONMOUSEOVER="changeImages('interaktion_01_01', 'images/interaktion_01_01-over.gif'); return true;"
ONMOUSEOUT="changeImages('interaktion_01_01', 'images/interaktion_01_01.gif'); return true;">
<IMG NAME="interaktion_01_01" SRC="images/interaktion_01_01.gif" WIDTH=88 HEIGHT=23 BORDER=0></A>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

Tipp: komplexere Rollovers, bei denen z.B. ganze Bilder ausgetauscht werden, erstellen Sie mit Hilfe von Photoshop und ImageReady genauso leicht: Verwenden Sie Photoshop für Ihr Originalbild. Kopieren Sie dieses dann auf eine neue Ebene (die Sie am besten gleich Mouseoverebene nennen) und machen dort entsprechende Änderungen. Bei Bedarf kopieren Sie diese oder die Hintergrundebene nochmals in eine weitere Ebene (und nennen diese Mausklickebene oder so ähnlich). Dann wechseln Sie zu ImageReady (vgl. 8.1). Für die verschiedenen Rolloverzustände markieren/demarkieren Sie nun jeweils die gewünschten Ebenen. Danach abspeichern wie oben beschrieben.

Anwendungsmöglichkeiten

Rollovers müssen nicht nur ein optisches Stilmittel sein, Sie können Sie auch inhaltsgerichtet einsetzen. Ein Beispiel: Denken Sie an ein Geländebild, bei dem im Normalzustand eine unbeschriftete Version, bei Mouseover eine beschriftete Version eingeblendet wird. Bei Klick kann man auf eine Seite mit weiteren Infos geleitet werden, oder aber Sie tragen gar keinen URL-Link ein (dann müssen Sie <a href="#"> verwenden, vgl. JavaScript-Modul 7. Natürlich könnten Sie dies auch klassisch durch Aufruf einer zweiten html-Seite, eines zweiten Frames oder iFrames erreichen, in der das beschriftete Bild eingebettet ist.

Vorteil der klassischen Methode: Die Seite mit dem unbeschrifteten Bild lädt schneller, da nur ein Bild eingebaut ist

Vorteile der Rollover-Methode:

  1. Da bereits beim Aufruf der Seite das zweite Bild im Hintergrund geladen wird, wird es bei Mouseover ohne Verzögerung angezeigt.
  2. Sie können auch mehrere Bilder auf einer Seite entsprechend vorladen (sofern Sie längere Ladezeiten in Kauf nehmen). Alle sind dann via Mouseover sofort austauschbar.

Beispiele:

Sie können also Rollovers sehr gut mit Slices verwenden (siehe oben bzw. im Modul JavaScript). Dadurch bekommen Sie allerdings sehr viele verschiedene Bilder zusammen und das Ganze kann recht unübersichtlich werden.

Sie können statt dessen auch sehr gut Imagemaps mit Rollovereffekten verwenden. Sehen Sie nachfolgendes Beispiel:

zum Palaeo.de-Portalzum Riffressourcen-Server

Derartige Beispiele sind von Hand sehr schwer erstellbar, da sie umfassende Skripte benötigen. Mit Photoshop und ImageReady geht es aber ganz hervorragend. Nachfolgend eine Anleitung (die teilweise auf einer entsprechenden Anleitung in Macwelt 3/02 basiert).

  1. Bild in Photoshop öffnen bzw. in Photoshop neues erstellen (auf Hintergrundebene).
  2. Ggf. Beschriftung, oben in weißer Schrift für den Normalzustand. Ergibt zwei neue Ebenen.
  3. Duplizieren der Ebenen mit den Schriften und entsprechende Änderung der Schrift, im obigen Beispiel Einfärbung in Rosa und leichter Versatz zur weißen Schrift (ergibt die Rollover-Zustände)
  4. Auswahl der ersten Ebene mit der weißen Schrift und Rezierung auf Hintergrundebene. Genauso gehen Sie mit der zweiten Ebene vor. Damit hat die Normalansicht die Schriftzüge auf der gleichen Ebene (dieser Schritt kann bei fortgeschrittenen Nutzern ggf. auch übersprungen werden, dann müssen aber bei den nachfolgenden Schritten die entsprechenden Ebenen für den Normalzustand eingeblendet bleiben).
  5. Wechsel nach Image-Ready: dort Erstellung eines Rolloverzustands für die erste Schrift (vgl. oben). Dabei müssen Sie die entsprechende Ebene beim Mausover-Zustand mit einblenden. Dann verwenden Sie das ImageMap-Werkzeug, um einen Rahmen zu ziehen und geben einen gewünschten URL ein.
  6. Danach gehen Sie wieder zurück in den Rollovermodus von Image-Ready. Verfahren Sie nun mit dem zweiten Schriftzug genauso (Rolloverstatus definieren durch Einblenden und Ausblenden der entsprechenden Ebenen, danach wieder ImageMap-Bereich definieren).
  7. Danach als Optimiert Speichern unter exportieren und dabei html-code mit generieren lassen. Voilá, fertig. Am besten verwenden Sie die generierte html-Seite aus Ausgangsbasis für Ihre Seite und editieren diese weiter. Wollen Sie die erstellte Rolloverimagemap in anderen Seiten verwenden, müssen Sie das header-Skript, den onload-Befehl im Body-Tag sowie den Bild- und Imagemap-html-Code im Body kopieren. Achten Sie darauf, dass die Pfade zu den generierten Bildern richtig bleiben.

Einen Haken hat die Sache allerdings. Für jeden Rollover-Status jedes Schriftzugs wird das komplette Bild nochmals gespeichert. Das erfordert kräftiges Vorladen bei Seitenaufbau. Sie sollten also ggf. nur kleine Imagemaps und nicht allzuviele Rollovers verwenden.

Anwendungsbeispiel: Erläuterung bzw. Selbsttest von Korallenmorphologien. Sie finden ein einfaches, nur auf Slicing und Rollovern basierendes Beispiel sowie ein komplexes, auf einer Kombination von Slicing, Rollover, dhtml-Floating-Boxes, animierten Gifs und JavaScript-Anpassungen basierende Lösung.

>> Modul 8.3: Daumenkino: Animierte Gifs und weitere Möglichkeiten

<< Modul 8.1: Imagemaps und Slices