Now that we have our two states for our rollover, we need to use slices and behaviors to produce the actual rollover effect.
The duplicate state should come after the existing state.Ĭhange the appearance of the new, duplicate state so that it's different from the original state. We are going to change the fill color. Next, go to the States panel and create a duplicate state as we learned to do earlier in this article. To start, select an object or shape in your document. We've selected the rectangle pictured below. You can create a rollover effect in Fireworks CS6 by using states. Perhaps it's a navigation button that changes from blue to green, or something like that. It's almost a sure bet that you've been on websites where a button or some other graphic will change appearance when you hover your mouse above it.
This gives you a chance to make sure your new link works. To preview your page in a browser, go to File>Preview in browser. In the target field, specify what you want to happen when the link is clicked on. For example, _blank opens the link in a new browser window. You can also enter alternate text in the Alt field. Now, take a look at the Properties panel. Press the Shift key and draw a rectangle around the area that you want to turn into a hotspot. To do this, select the Rectangle Hotspot tool. We are going to add a hotspot to the chart in the slice below. Creating a HotspotĪ hotspot makes part of an image or page interactive. You can use hotspots to create web links within sliced objects.
You can use 2-Up to compare the original with the optimized version.Īdd more slices if you want, then optimize each one. Optimize the sliced part of the image as you did a single-file image. Next, go to the Tools panel and click Hide Slices and Hotspots, then click the Preview button in the document area. To optimize a slice, make sure the slice is selected in the Layers panel. You can rename the slice in the Properties panel. The behavior handle to add interactivity to it. The selection handles that can be used to resize the slice.ģ. You will notice that the area you selected with the Slice tool has a green tint placed over it.Ģ. Next, draw a box over a portion of the page, as we have done below. To do this, select the Slice tool in the Tools panel. The Foreground Image slice type is the one you will when you are creating click-through prototypes.įor the time being, let's go ahead and learn to create a slice using the document pictured below. Whenever you create a slice, you will see these options, as shown below in the Type field. These options are listed in the Property panel and are Foreground Image, Background Image, and HTML. There are three different options for the type of slice that you create. Creating SlicesĪ slice is a portion of an image or design that you will export as a graphic. If you export a slice as HTML And Images, the slices can include hyperlinks, rollovers, and other interactive features. Once you create a slice, the slice is added to the Web layer of the document. NOTE: You can hover your mouse over any tool in the Tools panel to learn the name of the tool. The Show Slices and Hotspots button is located below the slice tools. It makes slices and hotspots visible. The Hide Slices and Hotspot button is located below the hotspot tools. This hides slices and hotspots. To the right of the hotspot tools are the slice tools. These let you cut an image into smaller pieces. When hotspots are exported with HTML, they can link to other web pages or trigger events, such as a rollover. These tools allow you to draw hotspots over your image. The Web tools are located in the Web area of the Tools panel.Īt the top left you have three hotspot tools grouped together. Fireworks gives you the tools to easily add hyperlinks to sections of your page, create animated GIF's, as well as add rollover and hover effects to objects.īefore we go any further in this article, it's important we take a second to talk about the Web tools that we will be using. One of the fun things about using Fireworks is creating interactive graphics and objects to use in your documents.
0 kommentar(er)
