Code-Erläuterung

Die Erstellung erfolgte überwiegend in GoLive; die Vorbereitungen in AdobeImageReady.

Einfaches Rollover-Beispiel:

Zuerst wurde das Bild erstellt und gesliced (Image Ready). Für die Fragezeichen-Bildbereiche wurden Kopien erstellt, das Fragezeichen gelöscht und entsprechend mit der Antwort beschriftet.

In GoLive wurde das Slice-Bild dann mit Rollovern versehen, die das Fragezeichen-Bild bei Mausberührung austauschen. Der von GoLive dabei automatisch generierte Skriptcode sieht z.B. für das erste Austauschbild folgendermaßen aus::

<csobj al="" h="39" ht="images/Korallenstruktur_01.jpg" t="Button" w="121"><a href="#" onmouseover="return CSIShow(/*CMP*/'button',1)" onmouseout="return CSIShow(/*CMP*/'button',0)" onclick="return CSButtonReturn()"><img src="images/Korallenstruktur_01b.jpg" width="121" height="39" name="button" border="0" alt=""></a></csobj>

Für die fortgeschrittene Version wurden folgende Änderungen gemacht:

a) Animierte Tentakeln: einige Teile des Slice-Bildes wurden in Photoshop mit zwei neuen Ebene belegt. Dorthinein wurde das Bild kopiert und mit Verzerren und Verschieben verändert. Nach Wechsel zu ImageReady wurden daraus kleine Gif-Animationen erstellt. Diese ersetzten dann die statischen Bilder.

b) Floating-Boxes mit dhtml-Kontrolle: einige Floating-Boxen wurden an die gewünschte Stelle gesetzt und mit erläuterndem Text belegt. Dieser wurde via CSS formatiert (incl. Rahmen für die Boxen). Die Sichtbarkeit der Boxen wurde auf 0 gesetzt. Für einige der Rollover-Bildchen (siehe oben) wurde ein leerer Link mit # gesetzt und diesem zwei GoLive-Aktion zugeordnet. Bei Mausklick sollte die entsprechende Floating Box sichtbar werden, mit Mausdoppelklick sollte die Sichtbarkeit wieder abgestellt werden. Der entsprechende Code für ein Beispiel ist unten in Blau zu sehen.

c) nun sollte die Rollover-Funktion noch adaptiert werden. Der Text sollte stehen bleiben, also nicht bei Mouseout wieder verschwinden. Dies sollte jedoch ebenfalls bei Doppelklick geschehen. Deshalb wurden die entsprechenden Funktionen im Code getauscht. In obigem Standardbeispiel ist das Verschwinden durch den Onmouseout-Befehl (in Rot) geschrieben (von GoLive generiert). Im adaptierten Beispiel unten wird dieser Eventhandler einfach auf ondblclick umgestellt (ebenfalls rot) und schon funktioniert das Ganze. Im nachfolgenden Beispiel ist also grüner Code identisch mit dem Standardbeispiel. Blauer Code gilt für die Floating Boxes und roter Code wurde entsprechend an die gewünschte Funktion adaptiert. Gar nicht so schwer, auch wenn man die GoLive-generierten Codes nicht im Detail nachvollziehen kann bzw. muss (vieles davon sind GoLive-spezifische Platzhalter, die gar nicht vom Browser umgesetzt werden, sondern nur einfaches updaten in GoLive erlauben sollen).

<csobj al="" csclick="B9B0E86F2" csdblcl="B9B0E99421" csout="B9B0E86F4" h="39" ht="images/Korallenstruktur_01.jpg" t="Button" w="121"><a href="#" onmouseover="return CSIShow(/*CMP*/'button',1)" ondblclick="CSAction(new Array(/*CMP*/'B9B0E99421'));return CSIShow(/*CMP*/'button',0)" onclick="CSAction(new Array(/*CMP*/'B9B0E86F2'));return CSClickReturn()"><img src="images/Korallenstruktur_01b.jpg" width="121" height="39" name="button2" border="0" alt=""></a></csobj>

ok, zurück zum Beispiel

oder Fenster schließen