Web Designer: Mouse over Button - Prinzip
Hallo,
hier ein Versuch, dass Prinzip vom Erstellen eines Mouse over Buttons zu erklären.
Folgende "Knackpunkte" gilt es zu verstehen:
1. Was sind Ebenen
Eure Webdesigner-Website besteht standardmäßig aus zwei Ebenen, der untersten "Mouse off Ebene" (hier liegen normalerweise alle sichtbaren Objekten drin) sowie der darüberliegenden unsichtbaren "Mouse over Ebene" (hier liegen z.B. Objekte drin, die bei Mouse over (also wenn der Mauszeiger über ein Objekt fährt), angezeigt werden sollen (z.B. Mouse over Buttons...). Man kann zusätzlich weitere Ebenen anlegen, mit welchen man wirklich sehr schöne komplexe Dinge machen kann (z.B. Klappnavigationen mit Untermenüs, Fotovergrößerungen etc.). Ebenen verwaltet man in der Ebenen-Galerie...
2. Unterschied von "Gruppe" & "Weiche Gruppe"
Eine einfache Gruppe gruppiert Objekte innerhalb einer Ebene. Eine weiche Gruppe ermöglicht das Gruppieren von Objekten, die in unterschiedlichen Ebenen liegen. Ferner ermöglichen weiche Gruppen die automatische Änderungen von Texten von überlagernden Objekten (z.B. Buttons) über einzelne Ebene hinweg.
Workshop:
Fangen wir nun an, das Prinzip anhand eines einfachen "Mouse over Buttons" zu erklären.
Ziel:
Es soll ein gelber Button gebaut werden, der bei "Mouse over" rot wird.
Voraussetzung:
Ebenen-Galerie angeschaltet
Schritt 1 - Gelbes Rechteck in Mouse off Ebene zeichen:
Wechseln Sie in der Ebenen-Galerie auf die Mouse off Ebene. Anhand des Pfeil-Symbols sehen Sie die Ebene, in welcher sie sich aktuell befinden.
Zeichnen Sie nun ein Rechteck (Basis unserer Schaltfläche) und färben dieses gelb. Runde Ecken schauen auch immer gut aus ...
Schritt 2 - Text hinzufügen:
Mittels des Text-Werkzeugs fügen Sie nun über den Button Text hinzu, formatieren diesen nach Wunsch und richten ihn aus.
Schritt 3 - Rechteck und Text gruppieren:
Damit beide Objekte beim z.B. Verschieben nicht wieder auseinander rutschen,
gruppieren wir beide. Dazu mittels des Auswahl-Werkzeugs (der Pfeil) einen Auswahlrahmen um beide Objekte ziehen (oder bei gedrückter Hochstelltaste (Shift-Taste) die einzelnen Objekte anklicken). Nun im Menü "Anordnen" den Punkt "Gruppieren" wählen. Unser Basis-Button ist nun fertig.
Schritt 4 - Gruppe kopieren:
Achten Sie darauf, dass ihre Gruppe markiert ist und wechseln Sie ins Menü "Bearbeiten" und wählen hier den Punkt "Kopieren Gruppe" (oder Strg + C drücken)
Schritt 5 - in die Mouse over Ebene wechseln:
Wechseln Sie nun in der Ebenen-Galerie in die Mouse over Ebene. Achten Sie darauf, dass das "Augesymbol" offen ist (somit werden Objekte in der sonst unsichtbaren Mouse over Ebene sichtbar geschaltet).
Schritt 6 - Kopiertes Objekt einfügen:
Nun können wir unsere sich im Zwischenspeicher befindliche Kopie des gelben Buttons (also unsere Gruppe) einfügen. Damit dies deckungsgleich geschieht und wir nicht noch richtig Positionieren müssen, nutzen wir die Funktion "An Position einfügen" im Menü "Bearbeiten". Wichtig: Achten Sie darauf, dass Sie in der Mouse over Ebene sind...
Schritt 7 - Eingefügten Mouse over Button rot färben:
Aktuell haben wir zwei gleiche Buttons deckungsgleich jeweils in der Mouse off und in der Mouse over Ebene. Nun wollen wir den Button in der Mouse over Ebene rot Färben. Normalerweise kann man Objekte einfach einfärben, in dem man eine Farbe aus der unteren Farbleiste per Drag & Drop auf das gewünschte Objekt zieht. Bei gruppierten Objekten färbt man allerdings alle Objekte der Gruppe ein. Daher müssen wir erst innerhalb der Gruppe das Objekt markieren, welches wir einfärben wollen. Dazu halten wir die STRG-Taste gedrückt und klicken in unser Gruppe auf das gelbe Rechteck. Dieses ist nun markiert. Jetzt erst ziehen wir die rote Farbe aus der Farbleiste auf die gelbe Fläche. Nun ist nur die vorher gelbe Fläche rot gefärbt...
Tipp: Kontrollieren Sie beide Ebenen mittels des Augesymbols:
In der Ebenen-Galerie können Sie nun mittels des Augesymbols die Mouse over Ebene unsichtbar schalten. Der rote Button wird nun ausgeblendet und Sie sehen nur den gelben Button in der Mouse off Ebene. Damit können Sie ein wenig rumspielen...
Schritt 8 - eine weiche Gruppe bilden (optional):
Damit wir unsere nun fertigen Buttons z.B. verschieben können, ohne das eventuell umständlich pro Ebene zu tun usw. gruppieren wir beide Buttons einfach. Da diese allerdings in zwei unterschiedlichen Ebenen liegen, müssen wir die Funktion "weiche Gruppe" anwenden (Erklärung siehe oben). Dazu ziehen wir einfach einen Auswahlrahmen um unsere Objekte und wählen im Menü "Anordnen" die Option "Weiche Gruppe bilden"
Schritt 9 - Button verlinken:
Damit ein Button auch als "Button" erkannt wird, muß dieser erst verlinkt werden. Dazu einfach unseren Button anklicken und auf das Link-Symbol (Kette) oder im Menü "Web-Einstellungen" im Reiter "Links wählen. Hier einfach nach Belieben verlinken
Fertig! Testen Sie Ihren Mouse over Button in der Vorschau
Um das Ergebnis zu sehen, einfach die Vorschau öffnen.
Mouse off (normaler Zustand) ist unser gelber Button (Mouse off Ebene):
Bei Mouse over wird nun unser roter Button angezeigt (Mouse over Ebene):
Tipp: Durch die weiche Gruppe kann nun einfach der Text verändert werden und wird automatisch Ebenen-übergreifend übernommen
Nach diesem Prinzip sind alle Button- & Navigationselemente in der Design-Galerie des WD6 aufgebaut. Wie schön eine Schaltfläche dabei ausschaut (z.B. 3D-Effekt durch Farbverläufe etc.) liegt bei Ihnen und dem Aufwand, den Sie in die Gestaltung der einelnen Buttons stecken wollen.
Und nun "Üben Üben Üben"
Gruß,
André
Hast Du denn auch richtig gruppiert und vor allem verlinkt?
Sehr gut erklärtes Tutorial, Dankee.
Blos ich weiss nicht, entweder spinnt das Programm, Ich oder mein PC. Ich kann das mit dem Mouseovereffekt nur einmal, wenn überhaupt machen, danach gehts nicht mehr. Genauso verhält es sich auch mit dem Effekt bei Fotos, so wie im Magix-Tut gezeigt, in der Vorschau geht dann gar nix, auch nicht der Link. Klickt man in der Ebenenpalette auf das Augensybol geht es einwandfrei, nur in der Vorschau tut sich nix.
Ich könnt heulen, sowas bring auch blos ich fertig. Das heisst ich kann nur auf die vorgefertigten Buttons und navigationsleisten zurück greifen. 
magix 7
??????? verlinken soll man den button und dann funktioniert der mouseovereffekt - stimmt
aber was heißt eine beliebige verlinkung ?? - wenn ich www.google eingebe oder www.irgendwas und drücke den button wird versucht diese site zu öffnen - das will ich natürlich nicht
sinnvoll wäre eine verlinkung auf eine site meiner präsenz - das geht zwar aber dann funktioniert das mouseover nicht
das ebenenprinzip ist mir völlig klar
mir schleierhaft warum eine so einfache funktion wie ein mouseover so kompliziert sein soll - vieleicht sehe ich ja den wald vor lauter bäumen nicht ?
vg - andreas
Hallo
Super dieses Tutorial. Endlich habe ich es geschafft, einen Mous over Button zu erstellen. Jetzt bin ich daran, eine ausklappbare Navigationsleiste versuchen zu machen, so dass wenn man bei einer vertikalen Navbar die Hauptbuttons noch sieht, wenn die Unterseiten erscheinen. Es ist nich schön, wenn die Buttons darunter verdeckt sind. Gibt es dazu ein Tutorial.
Grüsse aus der Schweiz
Hallo und ebenfalls vielen Dank!
Ich habe alles genauso nachgebaut und was muss ich sagen, es geht nicht....
Tatsächlich habe ich 3mal das ganze gemacht, weil ich dachte ich hätte was überlesen.
Leider kann ich nicht sagen, warum es nicht geht, doch es ist so.
Gibt es noch irgendwas, was ich vorher einstellen muss oder so....
Lieben Gruss
Jens
Hallo und vielen Dank auch!
Habe da aber noch ´ne Frage: Wieso kann man die so erstellten Buttons nicht zu einer Navigationsleiste machen? Krieg da immer nur ´ne Fehlermeldung. Wie krieg´ ich denn sonst ´nen langsam nach Unten ausklappbares Menu bei Mouseover hin, bei dem die Menupunkte auch noch auf der Website verlinkt sind?
Beste Grüße
Michael
Hallo Ariane,
die Mouse over Ebene ist eine spezielle Ebene, die nur einmal vorkommen kann. Allerdings kannst Du beliebig viele andere Ebenen in der Ebenen-Galerie anlegen, welche Du beliebig per Mouse over Funktion sichtbar schalten kannst. Anders als bei der speziellen Mouse over Ebene werden bei normalen Ebenen jedoch nicht nur die Einzelobjekte sondern die ganze Ebene (und somit alle Objekte darin) angezeigt.
Du kannst das ganz einfach mal ausprobieren.
1. Lege in die Mouse off Ebene ein Forto und skaliere es klein (Thumbnail-Größe)
2. Lege nun in der Ebenen-Galerie eine neue Ebene an (benenne die Ebene ggf. so, dass Du später (bei vielen Ebenen) nicht durcheinander kommst).
3. Wechsel in der Ebenen-Galerie in diese neue Ebene und ziehe jetzt das gleiche Foto aus der Bitmap-Galerie rein. Diese Ebene zeigt also das Foto "in groß".
4. Schalte die Ebene unsichtbar (mit dem Auge-Symbol), damit du besser arbeiten kannst.
5. Wechsele nun in die Mouse off Galerie, klicke mit der rechten Maustaste auf das kleine Foto und öffne nun die "Web-Einstellungen" im Reiter "Mouse over".
6. Stelle nun bei "Popup-Ebene anzeigen" die Ebene mit dem großen Foto ein und dann "OK".
Schaus Dir in der Vorschau an. Das Prinzip ist recht einfach. Per Mouse over Effekt kannst Du für jedes Objekt einstellen, das eine Ebene Deiner Wahl (mit allen Inhalten darin) bei Mouse over angezeigt wird.
Das selbe geht auch statt "Mouse over" mit Mausklick. Dazu machst Du 1:1 das gleiche wie oben, nur das Du in Step 5 nicht die Web-Einstellungen im Reiter "Mouse over" sondern in "Links" öffnest und hier bei Popup-Ebene Deine Ebene auswählst. Gleicher Effekt nur mit Klick.
Das sind Deine Möglichkeiten, der Rest bleibt Deiner Kreativität überlassen.
LG, André
Hallo und vielen Dank für diesen Workshop ...
jetzt steige ich gut durch. Zu diesem Thema habe ich aber dennoch eine Frage.
Kann ich mehrere Mouse over Ebenen anlegen ? Ich habs versucht, hat aber nicht funktioniert. Ich brauche diesen Effekt weil ich Bilder habe, die über die ganze Seite gehen sollen und wenn man über die Navigationsleiste geht, soll nicht die Leiste sich ändern sondern die Bilder im Hintergrund. Wäre supi, wenn Du mir das beantworten könntest. Ich weiß echt nicht, wie ich das lösen soll.
Danke im vorraus
Ariane