Gästebuch   Impressum

 

>> Startseite    >> Fortgeschrittene    >> Kleine Galerie in NOF erstellen **  
 

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.
galerie1-sgalerie2-sgalerie3-sgalerie4-s
galerie1

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:

mouse-over-namedamit 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';"

externe-link-leerAchtung: 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

 


dieses tutorial

version: alle versionen
Schwierigkeitsgrad: mittel
Bildmaterial: Nettes Ekel

Neue Tutorials

Suchfunktion einbauen
MLR kopieren
SuMa-Optimierung
Alle Filme wieder online
Weicher Bildwechsler mit Text
Die 2-Minuten-Newsbox
Das erste eigene Buttonset
Datepicker für Formulare
Includieren in NOF
Bildkomprimierung
Publizierungseinstellungen
Assetverwaltung

Content Management für Netobjects Fusion

Inhalte und Bilder ohne NOF aktualisieren
Fusion Content 3

Shop für Netobjects Fusion

Der kleine nahtlose Shop für eure NOF-Projekte
dank php und einer Datenbank ist eure NOF-Datei schlank und alle Daten bleiben bei eventuellen Crashes oder Layoutumstellungen unberührt
NOF-Shop 1.1

Haste mal nen Euro?

Die NOF-Tips sind werbefrei
Wenn die Tutorials geholfen haben, freuen wir uns auf deine kleine Spende via PayPal an paby@paby.de

Online-Support

Werktags: 9.00 - 14.00h
0160 37 87 652
WE oder Abends nach Absprache möglich
Schnelle Hilfe via Online-Tool 1,00 euro/min

Schulungen & Seminare

Online-Schulungen ab 35,00 Euro/Std.

Friendship (suma-hilfe)

Burlesque Korsetts und mehr
Triumed
Lebensfreude-konzept
Sportfotos
Fliegenruten
 

-
Fatal error: Uncaught Error: Call to undefined function ereg_replace() in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/netobjects_tutorials/kleine_galerie_netobjects.php:322 Stack trace: #0 {main} thrown in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/netobjects_tutorials/kleine_galerie_netobjects.php on line 322