Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Thema geschlossen 
Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
NOF Komponente Rolloverbild
#1
Das Rollovebild wende ich an um alt und neu gegenüber zu stellen. Für mich ist das ein netter Effekt, die Besucher erhalten eine zutreffende Gegenüberstellung, und der Aufwand zum Einrichten ist wirklich minimal.

Hier zuerst einmal der Effekt

Ich habe zunächst die beiden Fotos mit PhotoImpact (PI) auf die exakt gleiche Größe gebracht, in diesem Fall hielt ich 243 x 349 Pixel für ausreichend.Ich möchte dazu bemerken, daß ich Fotos grundsätzlich für meine Internetseiten vor dem Einfügen bearbeite. Nach dem Verkleinern gehört zwingend ein Nachschärfen dazu.

Die beiden Fotos:


Angehängte Dateien
.jpg  Alt_Buschmann.jpg (Größe: 89,94 KB / Downloads: 464)

#2
Nun klicke ich bei den Standard- Komponenten den Button Rollover- Bild an und ziehe im Layout ein Feld auf, die Größe passt sich später automatisch der Bildgröße an.

Ich markiere das Feld und es öffnen sich die Picture Rollover-Eigenschaften. Ich habe die Bilder auf der Festplatte liegen, und zwar gleich im Ordner Assets. So verhindere ich das mehrfache Vorkommen irgendwo auf der FP. Ich klicke auf das Auswahlfeld und navigiere zu dem Foto, das in der Ansicht angezeigt werden soll.

.jpg  KomponenteRB.jpg (Größe: 89,33 KB / Downloads: 372)


Unter Initial image ist das erste Foto jetzt eingetragen. Unter Mouse over image füge ich jetzt das Alternativfoto ein, und unter Mouse out image wieder das erste Foto. So habe ich den gewünschten auf auf meiner Site gezeigten Effekt.

.jpg  Bilder_einfuegen.jpg (Größe: 38,86 KB / Downloads: 252)


Diesen Effekt sehe ich nur, wenn ich mindestens lokal publiziere, unter der Vorschau sehe ich nur ein ausgegrautes Feld statt eines Fotos.

Man kann unter Mouse out image natürlich auch ein drittes Foto einfügen, dann wird nach Mouse out eben dieses dritte Foto angezeigt und nur die Fotos 2 und 3 wechseln so.
#3
Tach zusammen,
alter Schwede, das ist mal eine absolut Coole Sache.Werde ich mir mal genau anschauen und ausprobieren.!!!!!!thumbs up
Alle Beiträge dieses Benutzers finden
#4
thumbs up Danke Astour!

Zusatzinformation:

Man kann die Komponente auch in eine Tabellenzelle mit CSS- Formatvorlagen oder im Zellen-Eigenschaftsfenster positionieren. Somit kann man Bilder sauber übereinander oder nebeneinander pixelgenau anordnen.

Wer Rahmen oder Bildränder benötigt kann diese mit dem Grafikprogramm den Bildern hinzufügen. Auch Schatten sind möglich.
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#5
Der Phantasie sind wie immer keine Grenzen gesetzt. Und die Komponenten beherrscht man eigentlich sehr schnell. Mein Motto war schon immer: ich lerne erst richtig Auto fahren, bevor ich mich in ein Rallye- oder Formel-1-Auto setze. Shy

Und deshalb wage ich mich ab jetzt an schwierigere Probleme, deren Lösung ich mir durch viele Fragen und gute Antworten erarbeitet habe.
#6
Hier hat die Wirklichkeit dieses TUT überholt. Der Seitenname mit dem angeführten Beispiel hat sich geändert und ist jetzt hier zu sehen.
#7
Hallo Astour,

eine schoene Umsetzung und viel Arbeit mit den Fotos.
Ich wuerde glaube ich einen Hinweis auf die Seite bringen,
dass man mit der Maus ueber die Bilder gehen muss,
den man hat die Maus fast nur auf der rechten Seite des
Bildschirms. Oder die Seiten vertauschen und die Bilder rechts hinstellen.

Liebe Gruesse,

Bee
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
#8
Ah ja, guter Hinweis. Die Beschriftungen sind vor Kurzem erst verschwunden, und ich habs nicht bemerkt. Danke.
Thema geschlossen 


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  NOF Komponente Wechselbilder astour 3 9.780 18.03.2010, 10:07
Letzter Beitrag: astour



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!