Kleine Galerie-Funktion mit zwei Befehlen direkt in NOF

Eine schöne Übung, um erste eigene HTML-Befehle in Netobjects Fusion einzufügen und sich etwas mit der Asset-Verwaltung zu beschäftigen.

Vorbereitungen:

Wir brauchen jedes Bild einmal in groß und einmal in klein. die kleinen Bilder fügen wir ganz normal in NOF ein. als großes Bild fügen wir nur das erste Bild ein. Die Breite/Höhe der großen Bilder sollte identisch sein, sonst kommt es zu unschönem Zucken. damit die großen Bilder in den Assets auftauchen, diese als Asset einbinden oder auf einer Unterseite (die man aus der Navigation ausschließt) packen und anschließend einmal die ganze Seite publizieren, damit die Bilder auch in den Assets auftauchen. Alle Bilder können normabl mit weiteren CSS-Einstellungen (Rahmen, Abstand etc.) versehen werden.

Einstellungen für das große Bild:

damit der Mouseover-Befehl weiß, welchem Pbjekt sein Befehl gilt, muss dem großen Bild ein Name gegeben werden. Klickt das große Bild an und gebt in den tag folgendes (Screenshot gilt für Versionen bis NOF10 - ab NOF11: siehe hier)

• name="wechselbild"

das große Bild heißt jetzt wechselbild und kann für die den Bildwechsel zugeordnet werden. Natürlich könnt ihr einen anderen Namen vergeben, wechselt diesen dann aber auch entsprechend in der Einfügung der kleinen Bilder aus.

Vorbereitung für die kleinen Bilder

Auch die kleinen Bilder bekommen jeweils einen Befehl in den tag des HTML

• onMouseover="wechselbild.src='../assets/images/name-des-großen-bilds.jpg';"

Achtet unbedingt auf:

der Name  - in meinem fall wechselbild - muss bei beim großen Bild und allen onMouseover-Befehlen identisch sein

groß/kleinschreibung im Namen muss identisch sein

keine Umlaute, Leerzeichen oder Sonderzeichen im Namen des Bildes

Kleine Variation: mit Mouseout

wer möchte, dass bei mouseover ein Bild erscheint, bei mouseout aber ein anderes, erweitert den Befehl wie folgt:

• onMouseover="wechselbild.src='../assets/images/bild1.jpg';"
• onMouseout="wechselbild.src='../assets/images/bild2.jpg';"

oder auch mit Klick

Statt des onMouseover kann man auch onKlick nehmen - dann ändert sich das Bild durch Anklicken.

• onKlick="wechselbild.src='../assets/images/bild1.jpg';"

Achtung: damit diese Spielerei auch als klickbar erkennbar ist, sollten die kleinen Bilder zusätzlich einen leeren Link erhalten.

In diesem Fall muss dieser leere Link anders erstellt werden. Im Eigenschaftenfenster des Bildes einfach auf den Linkbutton klicken. dort auf externer Link umstellen und im Pulldownfenster auf (ohne) stellen und daneben einfach eine normale Raute - jetzt klappt es auch mit dem leeren Link