Scribd
Upload
7 views2 pages

4th Meeting-Midterm Website Development

An image map allows for clickable areas on an image, useful for linking to different pages. Hotspots can be created in three shapes: circle, rectangle, or polygon, with specific coordinates and dimensions defined for each. Users can also visually modify hotspots by dragging them and can add links to external web addresses for each hotspot.

Uploaded by

hayleykho
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views2 pages

4th Meeting-Midterm Website Development

An image map allows for clickable areas on an image, useful for linking to different pages. Hotspots can be created in three shapes: circle, rectangle, or polygon, with specific coordinates and dimensions defined for each. Users can also visually modify hotspots by dragging them and can add links to external web addresses for each hotspot.

Uploaded by

hayleykho
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Info Sheet 10: Image Mapping

An image-map is an image with clickable areas. Creating an image map is useful for images such
as a floor, campus map or world map that you want to contain links to different pages. You can define
each clickable area (hotspot) on the map using three shape values: rectangle, circle or polygon (irregular
shape).

To create an Image Map


1. In the Insert Menu, under Images Group click Image Map.
2. In your workspace click and drag your mouse to create a placeholder for your image.
3. In the Open dialog box, select your desire image.
4. Right-click the image, in the menu select the type of Hotspot you want:
• Add Circle Hotspot
• Add Rectangle Hotspot
• Add Polygon Hotspot
5. Once you select the type of Hotspot you want, the Edit Hotspot dialog box will appear.
If you select Add Circle Hotspot
• Y Coordinate – Identify the
center of the Hotspot in Y axis.
• X Coordinate – Identify the
center of the Hotspot in X axis.
• Radius – Identify the radius of
your Hotspot.

If you select Add Rectangle Hotspot


• Left (X) – Identify the center of
the Hotspot in X axis.
• Top (Y) – Identify the center of
the Hotspot in Y axis.
• Width – Identify the width of
the Hotspot.
• Height – Identify the Height of
the Hotspot.
If you select Add Polygon Hotspot
• Coordinates – It is a list of
coordinates of the corner of a
polygon.
• Add – add another corner of a
polygon
• Edit – edit the selected X and Y
coordinates of the existing corner of a
polygon.
• Remove – delete the selected
coordinates.
6. Next is add the link for your hotspot, under the Link Group. Select what type of Link you want to
perform.
7. If you select External Web Address. Enter the full URL (Internet Address) of the destination page
in the URL box. External URLs MUST begin with "http://" or they will not work.
8. When you are done, click OK.

Visually modifying the coordinates using the mouse


A more efficient way to modify the coordinates of the hotspots is by visually dragging them.
1. Right click the image map to display the context menu.
2. Select the hotspot type you want to insert.
3. A window will popup where you can set the initial
coordinates, the URL and alternate text of the area. By
default, Web Builder will insert the shape in the center of
the image map.
4. After you have clicked OK, the shape will be inserted to
the image map, you can now select it and drag it around
or change its size using the size handles.
5. To edit or remove the hotspot, right click the area to
display the context menu and select Edit Hotspot or
Delete Hotspot.

You might also like