How to create an SWF image with Pop-up regions.

There is often a need to create images for websites that contain pop-up explanations, or even links to other pages of your site. In WEBPLUS linking can be achieved by creating image maps. This involves placing hot-spots over an image, and then hyper-linking the hotspot to a page in your site. Creating Pop-Up’s is a little more tricky.

 

Here is what an image map looks like in WEBPLUS. Notice there is no indication of where the hotspots are, or what they do.

Click on Logos to open the download pages for each product.

A more interactive way to create image maps is with an SWF image that contains hotspots and/or links, such as in the example below:

By moving a mouse pointer over the image, you will see pop-up descriptions of what each area of the image is all about. Although this image doesn’t contain any links, it does adequately demonstrate the pop-up functionality of such images. (Links are optional.)

 

These types of files are very good for creating site navigation maps, or instructions on how something works. Its also good for showing what each element of a product does.

 

Fortunately, It’s very easy to create these SWF images. We used a product called Snagit (go to our links page for a link to their web site). Snagit is essentially a screen capture utility, but it also contains a photo editor. By capturing or loading an image into Snagit, you have a whole host of tools available to you which can add hotspots for displaying pop-up text, images and links.  Hotspots can be any shape or size, can have coloured mouse-over effects and can link to other pages in your site.

 

Once you’ve created the image map, Snagit allows you to export the image as an SWF file, ready for inserting into your WEBPLUS pages.

 

The good thing about SWF images, they can be moved around without having to worry about leaving the hotspots behind.