Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

April 2017

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Absturz bei FTP Publizierung
von nettesekel
16. April 2017, 12:51:56

E-Masil Adresse herausfinden
von nettesekel
11. April 2017, 16:16:20

Keine Neuinstallation möglich
von nettesekel
10. April 2017, 16:00:27

Publizieren geht nicht
von musikavokale
09. April 2017, 23:15:50

NOF 15
von nettesekel
04. April 2017, 23:55:26

Feststehender Seitenbereich
von nettesekel
01. April 2017, 17:37:12

Aufklappbare Navigation
von nettesekel
31. März 2017, 12:50:30

Nov 12 zum hare ausreisen
von Jim Panse
26. März 2017, 11:48:03

Lytebox Dateiablage
von fahrzeugseiten
21. März 2017, 23:23:23

* Schatznasen Feed

* Aquablogger Feed

* Strickzeugs Feed

* Links für Katzenfreunde

* ...

Fachanwalt für Internet-Recht C.Schmietenknop

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Autor Thema: Kleine Wechsel-Bild-Galerie mit mouseover-Effekt  (Gelesen 5029 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Kleine Wechsel-Bild-Galerie mit mouseover-Effekt
« am: 08. Februar 2014, 18:22:29 »
Einige von Euch werden sie sicher noch kennen, unsere "paby"... von ihrer Hilfeseite habe ich eine kleine Galerie augesucht, deren Umsetzung ich auf Wunsch eines Users genauer und auch für neue NOF-Versionen erläutern möchte.

Wie diese Galerie aussieht und funktioniert, könnt ihr sowohl auf pabys Hilfeseiten, als auch unserer Demo-Seite ansehen und testen.
Da das von paby verwendete Fotomaterial aus meiner Linse stammt, nutze ich es für dieses Tutorial einfach weiter.

Um eine solche Galerie zu erstellen, benötigt ihr von jedem Bild je eine kleine und eine große Version.
Alle Maße der kleinen Bilder sollten identisch sein, alle Maße der großen Bilder ebenfalls, damit die Bilder später nicht hüpfen und ein einheitliches Bild ergeben.

Hier noch eine andere Variante dieser Galerie: https://www.nof-community.de/index.php?topic=1973.0
« Letzte Änderung: 09. Juli 2014, 19:00:22 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Kleine Wechsel-Bild-Galerie mit mouseover-Effekt
« Antwort #1 am: 08. Februar 2014, 18:29:05 »
Im ersten Schritt fügt ihr eure kleinen Bilder in der Arbeitsansicht in NOF ein und platziert sie nach euren Vorstellungen. Von den großen Bildern wird nur das erste Bild in der Arbeitsansicht eingefügt.




Im zweiten Schritt geben wir dem großen eingefügten Bild einen Namen, damit der Browser später weiß, welches Bild bei Mouseover durch die anderen Bilder ausgetauscht werden soll.

Hierzu kopiert ihr euch zunächst folgenden Code:
Code: HTML5
  1. name="wechselbild"

In NOF markiert ihr nun das große Bild mit einem einfachen Klick und klickt im Anschluss den "html"-Button auf der EP. Es öffnet sich ein Fenster und ihr sucht euch am oberen Fensterrand das Icon für "Innen".
Klickt das Icon an... und dort wo nun der Cursor blinkt, fügt ihr den kopierten Codeschnipsel ein. Mit einem Klick auf den OK-Button am untern Fensterrand ist der Vorgang abgeschlossen.


« Letzte Änderung: 08. Februar 2014, 19:12:27 von nettesekel »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Aquablogger der Aquaristikblog
Re: Kleine Wechsel-Bild-Galerie mit mouseover-Effekt
« Antwort #2 am: 08. Februar 2014, 18:45:51 »
Im dritten Schritt bindet ihr die anderen großen Bilder als zusätzliche Assets in euer Projekt ein. Eine Anleitung dazu, wie man das macht, findet ihr hier: www.nof-community.de/index.php/topic,11.0

Achtet bitte auch darauf dass ihr eure Publizierungsstruktur auf "nach Assettyp" gestellt habst, ansonsten wird die Galerie nicht funktionieren. Wie man das falls nötig umstellen kann, ist hier beschrieben. www.nof-community.de/index.php/topic,1540.0

Im vierten Schritt statten wir alle kleinen Bilder mit einem Mouseover-Befehl aus.

Damit Ihr die Vorgehnsweise besser verstehen könnt, sage ich euch zunächst mal, wie die Bilder in meinem Beispiel heißen.

Meine kleinen Bilder heißen:
galerie1-s.jpg
galerie2-s.jpg
galerie3-s.jpg
galerie4-s.jpg

Meine großen Bilder heißen:
galerie1.jpg
galerie2.jpg
galerie3.jpg
galerie4.jpg

Ihr solltet die Bezeichnungen für die zueinandergehörenden Bilder immer so wählen, dass ihr sie gut zuordnen könnt. Also wie in meinem Beispiel
galerie1.jpg >> galerie1-s.jpg (s für small = klein)

Beginnen wir also mit der Vergabe der Mouseover-Befehle. Hierzu markiert ihr nun das erste kleine Bild mit einem einfachen Klick und klickt im Anschluss wieder den "html"-Button auf eurer Eigenschaftenpalette.




Es öffnet sich das Fenster welches ihr von der Eingabe für das große Bild bereits kennt. Sucht euch wieder am oberen Fensterrand das Icon für "Innen". Klickt das Icon an... und dort wo nun der Cursor blinkt, müsst ihr den Mouseoverbefehl einfügen.



Code: HTML5
  1. onMouseover="wechselbild.src='../assets/images/name-des-großen-bilds.jpg';"

Dort wo jetzt "name-des-großen-bilds.jpg" steht, müsst ihr den Namen des großen Bildes eintragen, das erscheinen soll, wenn der Mauszeiger das kleine Bild berührt.

Bezogen auf mein Beispiel heißt das, ich markiere das kleine Bild mit dem Namen
galerie1-s.jpg
und füge als mouseover-Befehl
onMouseover="wechselbild.src='../assets/images/galerie1.jpg';"

FFalls ihr die Galerie auf der Startseite eurer Website einsetzt, dann müsst ihr jeweils am Beginn des Bildpfades ein Pünktchen löschen.
Also auf der startseite müsste der mouseover-Befehl dann so aussehen:
onMouseover="wechselbild.src='./assets/images/galerie1.jpg';"


Diesen Vorgang wiederholt ihr nun auch für die anderen kleinen Bilder und tragt im Pfad des mousever-Befehls immer den passenden Namen des großen Bildes zu eurem kleinen Bild ein.

Viel Spaß bei der Umsetzung! :)


« Letzte Änderung: 03. Juli 2014, 13:44:42 von nettesekel »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion