Fast Image Mapping with Fireworks

No Comments

We are going to explain a fast and easy way to create an HTML Image map with Fireworks.

First, just explain that an html image map, is to add different active area over a picture that can contain different links.

Let’s suppose you have to do an interactive map, where each country or province need to be clickeable, to do an interactive image map
will be the perfect solution, and the tricky think in that sample would be to create different active area for each region, but with
Fireworks.

1Select the “Polygon Hotspot Tool”

Post_FWMAP_01

2Create the active areas, just drawing polygons over your picture.
Post_FWMAP_02

3Export. Once all areas are finished, just export it, this time fireworks will not export just a picture, will create also an HTML file which will contain a code with all the coordinates of your polygons.

Post_FWMAP_03

And it is done, you got what you where looking for, a way to create even a very complex image map fast and easily, the code
is ready to be used and it is quite simple, so feel free to customize it with CSS to have a more dynamic hover effect.

You can hover your mouse over the continents and find different titles for each one.

Zona 6 Zona 7 Zona 8 Zona 4 Zona 1 Zona 2 Zona 5 Zona 3 Zona 9

About us and this blog

We are a full service agency that deliver compelling digital marketing solution. Our winning solutions and experience helps to deliver great results across several key areas.

Our team is ready to review your website and provide some tips to help you propel traffic, drive leads and increase revenue.

More from our blog

See all posts