Bilderwechsler mit weichem Fadingübergang in Netobjects
Ein einfacher Bildwechsler mit weichen Übergang. Eine nette Übung um erste eigene HTML-Befehle in Netobjects Fusion einzufügen und sich etwas mit der Asset-Verwaltung zu beschäftigen.
Vorbereitungen:
Der Wechsler besteht aus zwei Scriptschnipseln, die sich ohne Probleme einfügen lassen - einfach die in verschiedene Bereiche des Layout-HTML kopieren. Alle Bilder sollten die gleichen Maße haben. Damit die Bilder im Asset-Ordner integriert sind, müssen sie entweder als Asset eingebunden (siehe hier) werden oder auf einer Unterseite die von der Navigation ausgeschlossen ist, eingefügt werden.
Dieser Schnipsel kommt between Headtags
wir drücken F9, um das Layout-Eigenschaftenfenster zu öffnen und drücken auf den HTML-Button - es öffnet sich ein Fenster - dort auf den Reiter zwischen den Head-Tags
Bei fadeimages müsst ihr natürlich eure Bildnamen eintragen, für weitere Bilder einfach entsprechend weiterzählen.
Startseite oder Unterseite: Bild richtig referenzieren
Der obige Code gilt für Unterseiten bei Publzierung nach Assets (die normale Voreinstellung in NOF) . Der Pfad für die Bilder muss nicht geändert werden. Möchtest ihr den Bildwechsler auf der Startseite integrieren muss ein Punkt entfernt werden. Wer Probleme mit dem Referenzieren des Bildpfades hat, sollte sich hier einlesen
Für die Startseite: ./assets/images/bild.jpg
Für die Unterseiten: ../assets/images/bild.jpg
Achtet unbedingt auf:
Groß/kleinschreibung im Namen und Datei-Endung muss identisch sein
keine Umlaute, Leerzeichen oder Sonderzeichen im Namen des Bildes
Die Bilder lassen sich verlinken und wenn gewünscht lässt sich auch das Ziel angeben. Achtet auf die Kommentare hinter den Bildpfaden im ersten Scriptschnipsel.
Dieser Schnipsel kommt an die gewünschte Stelle - entweder ins HTML eines Textfeldes oder einer Tabellenzelle
Folgende Änderungen sind möglich
* 140 ist die Breite * 225 ist die Höhe * 0 ist kein Rahmen - ansonsten 1 ist 1px breit und so weiter * 3000 ist die Delay-Zeit in Millisekunden - 3000 ist also 3 Sekunden * 1 heißt: das Bild bleibt bei Mouseover stehen - ansonsten hier 0 eintragen * R heißt, dass die Reihefolge der Bilder zufällig ist - ansonsten einfach rausnehmen
fertisch
Wer sich auskennt kann nach seinen Bedürfnissen anpassen - das Originalscript (englisch) zeigt, wie sich mehrere Bilder auf einer Seite faden lassen - als Denkansatz für vielfältige Spielereien - siehe hier http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
dieses tutorial
version: alle versionen Schwierigkeitsgrad: mittel Bildmaterial: Nettes Ekel
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