FIREWORKS TUTORIAL slicing / hotspots / image swap
 

In this Tutorial we imagine that we have been commissioned by the UN to create a website that allows viewers to mouseover different countries and at the same time have their national flags appear in the corner of the page and disappear when the mouse leaves that country. Pop up menus will also appear that can link the viewer to related sites that provide more information.


First open the above image in FireWorks (found in > Google Images >  "WORLD")

NEXT : with the grid turned on create the slice where the image swap will occur (flags) 
- create the slice in the approximate aspect ratio of a typical flag
 
NOTE : there are now 5 images where there was 1.  Slicing takes 1 image and changes it into many so that you can introduce interactivity into the image.
All of the images are placed in a table that is automatically created by FireWorks

Image D is where we will create the image swap.
- the sliced images will be named      worldmap_r1_c1.  worldmap_r2_c2 etc.......
- r = row  and  c = column
- when you export the assets you will see many  .jpg  files an .html table file and perhaps a couple of other files containing information to drive the interactions.

- FireWorks automatically builds a table file that holds all the sliced images together.
- the html file is also the file that you link to from your index page
YOU MIGHT PREFER TO WORK UP YOUR ART(MAP) BEFORE YOU CONTINUE
- ie>> enter a title , put rollover site indicators etc.

TRY TO SLICE IN SUCH A MANNER AS TO MINIMIZE THE NUMBER OF IMAGES CREATED
~~ make a plan before you start ~~


NEXT: use the rectangular hotspot tool to highlight an area on your  image. (in this case Canada, Mexico, and Iceland). There is a circular and polygonal hotspot tool if you prefer. 
 

We now have to get 3 flags and size them to the size of the swappable image. You find the pixel dimensions in properties in FireWorks. (108  by 70 pixels). After rendering save them to the same place as your slices.

NEXT: right click on a hot spot select Add Swap Image Behavior and select the slice you will swap on mouse over then select the image (flag) that will appear during the swap.

Preview your work and observe an  image swap when you mouse over a hotspot.

|

NOW: you can create pop up menus as labels and or as hyperlinks to related pages.
Right click your hot spots and select POP UP MENU and give them a title and link address (cut and paste URLs).
Pop ups can be customized in many ways try it out and choose the best for your design concept. 

You can open a slice in PhotoShop (or FireWorks) and add text titles etc to give your interactive dynamic page a polished look.

See finished interactive image    Hints Tips

UPLOADING AND LINKING on your website - upload all the exported files to your site  and create a link from your index page to the  .html file  that was created by fireworks to hold all your slices