Implement complex image interactions in fireworks

Image interaction technology is widely used in the process of Web-page design, such as button effect and image display. That is, when the mouse points to an image in a Web page, it triggers the display of another image. Now let's take a look at the specific operation

When you start the FW, you can create a new canvas that is as large as a Web page. Then use the drawing tool to draw three rectangular buttons randomly, and enter the relevant text content on the button. Of course, you can also use a variety of tools to draw more beautiful buttons. Here I enter the words "mobile phone", "Camera" and "Walkman" on three buttons respectively. Then the object and text of each button is selected and used the "Modify-group" command to make these three buttons into three separate grouped objects. You can then arrange the three buttons to align according to the needs of the Web page when they are made.

Select all three buttons and click the right mouse button on any of the buttons, and select the Insert slice item from the pop-up menu. A prompt will pop up and you can click the "multiple" button directly. This creates an export slice for the three buttons. As shown in Figure 01.

Figure 01

Click the "Add Frame" button in the lower-right corner of the frame panel to create a new three blank frame. As shown in Figure 02.

Figure 02

Then draw or import a phone-related picture in frame 2nd, put it in the right place, click the right mouse button on the picture, and select Insert Slice from the pop-up menu. Similarly, in frames 3rd and 4th, you can also import an image to interact with the camera and Walkman buttons, and then create an export slice for the image. As shown in Figure 03.

Figure 03

Click on the "Phone" button slice, and then use the left mouse button to hold the middle of the slice of the Circle control diagram, drag and drop the mouse to its image exchange slices, at this time between the two slices will appear a blue link curve, as shown in Figure 04.

Figure 04

Releasing the mouse immediately pops up an "Swap image" settings window, and on the Drop-down menu, select the frame of the image that you want to swap with the mobile button slice. Here we select "Frame 2". As shown in Figure 05.

Figure 05

In the same way, continue to create separate image slice links for the camera and Walkman buttons in the Swap Images dialog box. Once we're done, we can press F12 to view it in the browser. How, the effect is not bad! As shown in Figure 06.

Figure 06

Finally, the file-export option allows you to save the effect as a Web page format. You can open it to enjoy it anytime, anywhere.