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.0Achtet 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.0Im 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.
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.jpgund 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!