Create Image Map

"Image Maps" are images that contain clickable areas, or "hotspots", each "hotspot" redirecting the browser to a different URL. The WebWizard PRO makes it eay to define these "hotspots" with just a click of the mouse!

Initial Options:

Image To Use As Map

The URL (Internet address) of the image you wish to create "hotspots" for. Use the "Browse" button to use a local file from your computer
TIP: To have a play with Image Maps, try entering "MapTut.gif" (no quotes) in this field, and see the Tutorial below

Main Options:

Shape	Controls the "Shape" of the hotspot currently being defined. Available shapes are Circle Rectangle Polygon
Current Shape	Indicates the currently selected shape
Map Name	A unique, internal name, which will be used to attach the correct map to the correct image within your webpage
Point to URL	The URL that the current hotspot being defined should link to when clicked
Image Preview Area	The area immediately to the left of the "Co-Ordinates" list shows your original image, with a set of "cross-hairs" over it. You can then use your mouse to click on areas of the image to create your "hotspots"
Co-Ordinates	A list of the co-ordinates for all the shapes (hotspots) The WebWizard creates. You do not have to enter anything into this area, as The WebWizard generates all the coordinates for you as you define your hotspots. You may, however, manually edit or "fine tune" coordinates before creating your final map
Status Area	Directly below the Image Preview Area is a Status bar that prompts you what to do next, as well as displaying cross-hair co-ordinates, whilst your mouse moves over your image
Styles	The "Styles" button allows you to further customize the appearance of the image
Preview	Instantly preview your finished Image Map in a pop-up window at any time during creation

Preview of "Create Image Map" screen using image "MapTut.gif":

Image Map Tutorial:

Click the "Create Image Map" toolbar button

Enter "MapTut.gif" as the "Image To Use as Map", and click "OK"

A screen similar to the example above should be shown

We are going to define 3 "hotspots" in this example, starting with a circular shape. Each "hotspot" will link to a different imaginary page (URL)

Begin by clicking the "Circle" button, the "Current Shape" indicator should change to reflect this shape.

Next, enter "page1.html" in the "Point To (URL)" field - this is the page we want to load when our first hotshot is clicked

Now, with your mouse, click the red dot in the center of the yellow circle on the "MapTut.gif" image. This defines the center of our "circle" hotspot. When you click this point, you will see coordinates being added to the "Coordinates" list

Click any point on the circumference of the circle, to set the radius of our hotspot.

That's our first hotspot created, next we will create a rectangular hotspot over the yellow rectangle.

Click the "Rectangle" button, and enter "page2.html" in the "Point To (URL)" field

A rectangular hotspot requires two sets of coordinates - the top-left most point, and the bottom-right most point of the shape, so use your mouse to click these two points of the rectangle

The last hotspot we will create will be a "Polygon" - use this for irregular shaped hotspots, or any hotspot that isn't a circle, square, rectangle

Click the "Polygon" button, enter "page3.html" as the URL. Now, each time you click on the "maptut" image, the position you click will be saved as a "node" of the polygon

So to define a star shaped area you need to click on every "corner" of the shape (10 points), clicking only the tips of the stars (5 points) will instead create a pentagon shape

Once you have clicked all 10 points, our example map is complete. Give it the name "MyMap" in the "Map Name" field, and click the "Preview" to see how the finished map will look

To place the finished map into your webpage, click "OK"

Create Image Map

Next Topic: Insert e-mail Address Link >