Web designers can use hotspots to make small parts of a larger graphic interactive, linking areas of web graphics to a URL. You can create an image map in Fireworks by exporting HTML from a document that contains hotspots.
Hotspots and image maps are often less resource-intensive than sliced graphics. Slicing requires more processing power because of the additional HTML code needed to download and reassemble sliced graphics.
Create hotspots
Hotspots are ideal when you want areas of an image to link to other web pages, but you don't need those areas to highlight or produce rollover effects in response to mouse movement or actions.
Hotspots and image maps are also ideal when the graphic onto which you've placed your hotspots would be best exported as a single graphic file—in other words, the entire graphic would best be exported using the same file format and optimization settings.
Hotspots can be rectangles, circles, or polygons. Polygons are useful when working with intricate images.
You can select an object and insert the hotspot over it.
Create a rectangular or circular hotspot
Select the Rectangle Hotspot or Circle Hotspot tool from the Web section of the Tools panel.
Drag the hotspot tool to draw a hotspot over an area of the graphic. Hold down Alt (Windows) or Option (Mac OS) to draw from a center point.
Note: You can adjust the position of a hotspot as you drag to draw it. While holding down the mouse button, press and hold down the spacebar, and then drag the hotspot to another location on the canvas. Release the Spacebar to continue drawing the hotspot.
Create an odd-shaped hotspot
Select the Polygon Hotspot tool
.Click to place vector points, much as you would draw straight line segments with the Pen tool. Whether the path is open or closed, the fill defines the hotspot area.
Create a hotspot by tracing one or more selected objects
Select multiple objects and then select Edit > Insert > Hotspot.
Click Single to create a single rectangular hotspot covering all objects or Multiple to create multiple hotspots (one for each object).
The Web Layer displays the new hotspot or hotspots.
In the Property inspector, select Rectangle, Circle,
or Polygon from the Hotspot Shape pop-up menu.Prepare hotspots for export
Assign hotspot properties such as URLs and alternate text in the Property inspector, in the same way you assign slice properties.
Create image maps
After you've inserted hotspots above a graphic, export the graphic as an image map so it functions in a web browser. Exporting an image map generates the graphics and the HTML containing map information for hotspots and corresponding URL links. Fireworks produces only client-side image maps when exporting.
Alternatively, copy your image map to the Clipboard and paste it into Dreamweaver or another HTML editor.
For information on placing exported Fireworks content into Dreamweaver, see Working with Dreamweaver
Optimize the graphic to prepare it for export.
Select File > Export.
If you are exporting your image, navigate to the folder where you want to place the HTML file, and name the file.
If you have already built a local file structure for your website, you can save the graphic in the appropriate folder for the site from here.
In the Save as Type pop-up menu, select HTML And Images.
Select an option from the HTML pop-up menu:
- Export HTML File
- Generates the required HTML file and corresponding graphics files for importing into Dreamweaver or another HTML editor.
- Copy to Clipboard
- Copies all required HTML, including a table if the document
is sliced, to the Clipboard for pasting into Dreamweaver or another HTML
editor.Note: For Slices, select None only if the document contains no slices.
(Export only) If necessary, select Put Images In Subfolder and browse to the appropriate folder.
Click Save.
When you export files, Fireworks can use HTML comments to label the beginning and end of code for image maps and other web features. By default, HTML comments are not included in the code. To include them, select Include HTML Comments on the General tab of the HTML Setup dialog box.
Create rollovers with hotspots
Use the drag-and-drop rollover method to attach a disjoint rollover effect to a hotspot. The target area must be defined by a slice. Rollover effects are applied to hotspots the same way that they are to slices.
After you create a disjoint rollover with a hotspot, the connecting blue line remains visible only while the hotspot is selected.
Use hotspots on top of slices
If you have a large graphic and you want only a small portion of it to act as the trigger for an action, place a hotspot on top of a slice to trigger an action or behavior.
You can also place a slice on top of the graphic, and then place a hotspot on top of the text. Rolling over just the text triggers the rollover effect, but the entire graphic beneath the slice swaps out when the rollover effect occurs.
Insert a slice on top of the image you want to swap out.
Create a new state in the States panel, and insert an image that you will use as your swapped image. Be sure to place it beneath the slice you inserted in step 1.
Drag a behavior line from the hotspot to the slice that contains the image you want to swap.
Select the state holding the rollover image from the Swap Image From list, and click OK.
