WebsiteX5.info - The ultimate guide for Incomedia's WebsiteX5

Image maps are images with defined regions. Each defined region has it's own url, which is opened when a user clicks into that region. This way you can have one image with multipe targets.

But how do you create an image map? In this article I will describe the basics and how to implement a image map in WX5. More information on image maps can be found on the internet...

First, of course you have to create or choose the image you want to use. For this demo I have created an image with two regions, a square and a circle. The original image is 300x300 pixels.

Because we wont be using the WX5 image editor you'll have to upload this image to your webserver, for example in the /images-folder.

Next you have to define the separate regions within your image. You can do this manually, but it is much easier to use a image map editor. You can find online editors on the internet or you can use a special program for this. I choose to use MapEdit 4.05. This is an easy to use program and you can define squares, circles and polygons or use the 'magic wand' function to automatically select a region.

Per region you can set the url which should be opened. Add an alt-text which is shown when the mouse hovers over the region. If you want the new page to be opened in a new window set the target to '_blank'.

You can also define a 'default' region with an url which is opened when you click outside the defined regions...

When you have defined all the regions click on the 'HTML'-icon in the toolbar of Mapedit. A Notepad with the generated code is opened. Copy this code to the clipboard.

Open WX5 and edit the page where you want your image map. Add a HTML Code object to the page, double click on this HTML Code object and paste the code in it.

Set the height to a few pixels larger than your image (click to enlarge):

You will have to edit the code to match the location where you saved the image on your webserver.

In the case of this example this is:
<img src="http://www.rode-ict.nl/wx5/images/imagemap.jpg"
usemap="#imagemap" alt="" style="border-style:none" />

(You could use src="images/imagemap.jpg", but then you can only see the result after you have exported your website)

Next you can save and test your image map. Give it a try!

Enjoy!
Rbbrt