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 MapThe 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:
ShapeControls the "Shape" of the hotspot currently being defined. Available shapes are
  • Circle
  • Rectangle
  • Polygon
  • Current ShapeIndicates the currently selected shape
    Map NameA unique, internal name, which will be used to attach the correct map to the correct image within your webpage
    Point to URLThe URL that the current hotspot being defined should link to when clicked
    Image Preview AreaThe 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-OrdinatesA 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 AreaDirectly 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
    StylesThe "Styles" button allows you to further customize the appearance of the image
    PreviewInstantly 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"
  • Next Topic: Insert e-mail Address Link >