How to create an image hover mouseover using Fireworks So erstellen Sie ein Bild hover mouseover mit Feuerwerk
Posted on July 5, 2009 at 5:35 am Veröffentlicht am 5. Juli 2009 5:35
To create web pages with dynamic HTML capabilities from scratch, we would traditionally need to master DHTML and that includes HTML techniques like image hotspots and JavaScript. In this tutorial I will show you how to automatically create DHTML pages with a swap image behavior using Adobe Fireworks. So erstellen Sie Web-Seiten mit dynamischen HTML-Fähigkeiten von Anfang an, wir würden traditionell müssen Master DHTML und dazu gehört auch die HTML-Techniken wie Bild-Hotspots und JavaScript. In diesem Tutorial zeige ich dir, wie das zum automatischen Erstellen von DHTML-Seiten mit einem Swap-Bild Verhalten mit Adobe Fireworks .
The final output is a complete DHTML project complete with HTML, image files and JavaScript code – and those are done without any coding by hand. Die letzte Ausgabe ist eine komplette DHTML-Projekt komplett mit HTML-, Bild-Dateien und JavaScript-Code - und diese werden ohne Codierung von Hand.
1.) Create an image using the shape tool under the vector section (by default, the shape is set to rectangle). 1). Erstellen Sie ein Bild mit dem Form-Werkzeug im Rahmen der Vektor-Bereich (Standard, wird die Form auf Rechteck). To view more images simply click on the small arrow beside the rectangular image, or simply press “U” to toggle the most commonly used shapes. Um weitere Bilder klicken Sie einfach auf den kleinen Pfeil neben dem rechteckigen Bild, oder drücken Sie einfach auf "U", um die am häufigsten verwendeten Formen. Below is a screenshot of expanded shape tool. Unten ist ein Screenshot der erweiterten Form-Werkzeug.
2.) The shape we are going to create will act as a trigger for our swap image behavior later on. 2). Die Form werden wir schaffen, die als Auslöser für unser Verhalten Swap Bild später auf. For now we will use a circle but you can use any shape or object as you prefer. Im Moment verwenden wir einen Kreis, aber Sie können eine beliebige Form oder ein Objekt, wie Sie möchten.
3.) After creating a shape on your canvas import a picture to be used for image swapping. 3.) Nachdem Sie eine Form auf Ihrer Leinwand ein Bild importieren, die für Bild Swapping. Click on file then import, or press ctrl + r on your keyboard then browse for the desired picture. Klicken Sie auf Datei importieren, oder drücken Sie Strg + F auf Ihrer Tastatur, dann suchen Sie nach dem gewünschten Bild.
4.) Your canvas should have a trigger button and image as discussed earlier. 4.) Ihr Leinwand sollte ein Trigger-Taste und Bild, wie früher. Next we create a new frame used for another image. Weiter erzeugen wir einen neuen Rahmen für ein anderes Bild. Click New/Duplicate frame under the Frames and History panel. Klicken Sie auf "Neu / Frame duplizieren unter dem Rahmen und Geschichte an.
5.) Select newly created frame and import another image. 5.) Wählen Sie die neu erstellte Bild-und Einfuhr ein anderes Bild. It is best that image on frame 1 and frame 2 has exactly the same absolute positioning on your canvas. Am besten ist es, dass Bild auf Bild 1 und Bild 2 ist genau die gleiche absolute Positionierung auf Ihre Leinwand.
6.) Going back to frame 1. 6.) Zurück zu Frame 1. While the circle shape is selected, right click on it and insert a polygonal slice in it. Während der Kreis Form ausgewählt ist, Rechtsklick auf die Datei, und legen Sie eine polygonale Scheibe ist.
7.) Next create a rectangular slice for image 1 and image 2 7). Weiter ein rechteckiges Stück für Bild 1 und Bild 2
Frame 1: Should look like image below Frame 1: sollte wie folgt aussehen: Bild unten
Frame 2: Frame 2:
8.) Select the circle image on frame 1 then right click on it and click Add swap image behavior: 8). Wählen Sie den Kreis Bild auf Bild 1 und dann der rechten Maustaste darauf und klicken Sie auf "Hinzufügen Swap Image Verhalten:
9.) Upon clicking on add swap image behavior another window will appear, click on the rectangular slice we created earlier. 9.) Nach einem Klick auf "Hinzufügen" Swap-Verhalten ein anderes Bild erscheint, klicken Sie auf die rechteckige Scheibe wir zuvor erstellt haben.
10.) Press F12 on your keyboard to preview it on your browser. See the difference between the two screenshots below before and after hovering the mouse pointer on the circle. 10.) Drücken Sie F12 auf Ihrer Tastatur, um eine Vorschau auf Ihrem Browser. Siehe die Differenz zwischen den beiden Screenshots unten vor und nach dem Schweben Sie den Mauszeiger auf den Kreis.
Before hover: Vor hover:
During hover: Während hover:
![clip_image002 [5]](http://www.online-tech-tips.com/wp-content/uploads/2009/07/clip-image0025.jpg)
Adobe Fireworks is available from this URL: Adobe Fireworks ist von dieser URL: http://www.adobe.com/products/fireworks/ http://www.adobe.com/products/fireworks/
Ben Carigtan shows you how it's done. Ben Carigtan zeigt Ihnen, wie's geht.
» Filed Under »Abgelegt unter Web Site Tips Web Site Tips
 Save this page Speichern Sie diese Seite |  Stir it up on Mixx Rühren Sie es auf Mixx | |
 Add to Reddit Add to reddit |  Stumble this page Stumble dieser Seite |
Related Posts In Verbindung stehende Pfosten
- How to create animated menus with Adobe Fireworks So erstellen Sie animierte Menüs mit Adobe Fireworks
- How to apply picture frame effects in Photoshop Wie soll man sich bewerben Bilderrahmen Effekte in Photoshop
- How to use the snipping tool in Windows Wie nutzen Sie das Tool in Windows snipping
- How to use layers as background effects in Photoshop Wie Ebenen als Hintergrund Effekte in Photoshop
- How to insert a graphic header in Excel Wie, um eine Grafik in Excel-Kopfzeile
