Using hot zones and cutting (Hotspots and Slices) (upper)

Using hot zones and cutting (Hotspots and Slices) (upper)


Each PNG file has a special layer-web Layer,web Layer is specifically used to record hot zones and cut information that contains the attributes of the HTML language and is therefore called the Network layer (Web Layer).

The Hot Zone (Hotspots) is the object that specifies which part of the region to which hyperlink address when a picture contains several hyperlinks, expressed in a standard HTML language with a <map> tag.

Cutting (Slices) is the first concept of fireworks, when the network speed is not very ideal and the picture is slightly larger, the designer usually put a large picture into a small picture in the table, so that the image display speed, but this task time-consuming and laborious, So fireworks provides a visual tool for cutting pictures, greatly reducing the duplication of work by designers.

The hot zone and cutting will eventually be exported to standard HTML code, and you can simply insert the code into the appropriate location on the page. We should be able to easily find the hot zone and cut the position in the toolbar, and see their extension tool, into the diagram:


Let's look at the Hot Zone tool, which contains 3 tools, which are used to create hot areas of rectangular, circular, and irregular shapes, and they can be used to create hot zones of any shape, just as they do with other drawing tools.


If these tools do not meet your requirements for precise control of the shape of the hot zone, then there are other ways. For example, we're going to build a star-shaped hot zone, and we can do this: first, draw an expected star on the artboard, using a multilateral tool (Polygon Tool) should be very easy to do this, and then choose Insert->hotspot, Fireworks creates a hot area of the same shape and size according to the path of the polygon (note: Fireworks creates a new hot area object instead of converting the path, so the original polygon still exists), and you can delete the first polygon when you finish.


If we now drag a node on the hot zone with the node tool (Subselection Tool), we can see that the hot zone is still well editable!!!

Now we're going to add the HTML features to the hot zone and hyperlinks. Open the Object surface (Window->object) to see the related parameters. This includes the URL address of the link, the alt text, and the way the link is opened (Target), and in the final shape menu we can also convert the hot zone to the most basic 3 shapes.


Once you've done this, you can output HTML-formatted code with File->export. The following is the result of the output, try to right-click the rectangle inside the box will see a star shape, and I also added a onmouseover in this hot zone, in the browser status bar display text behavior, if interested, you can try.