©2000-2002 3Dize Inc. All rights reserved

What is an Image Map? Example Instructions Other Image Maps

Image Maps

CPH :  Guides :  Images :  Image Maps

What is an Image Map? An image map is any image on a webpage that has been divided into sections that act as individual separate links.  Sections of the overall image have their own unique qualities and can be linked to different files, other images or webpages. Example  This single image has been divided into sections.  Move your mouse over the image and click the linked sections of it.

Instructions 1. Import a GIF or JPG image onto your page using the Import button or the Insert Menu or drag+drop an image onto the page.

2. Click the View Menu and click on Invisible Object Borders.

3. Use the Insert Menu to put an Invisible Object on the page.

Invisible Object is a transparant image file.

4. Drag the Invisible Object on top of the imported image and place it exactly where you want it.  Resize the Invisible Object by dragging its sides or corners.

5. Link the Invisible Object to an image, file or webpage. 6. Add additional Invisible Objects on top of your image, thus creating an Image Map to other webpages and files on your website.  Link these other Invisible Objects to images, files or webpages. 7. Group the main image and all of the Invisible Objects to easily move the entire Image Map to the desired location on the page.

Other Image Maps There are additional methods of adding an Image Map: • Open your image in a graphics editor and break the image in to separate individual pieces.  Save these pieces as individual image files and import or drag+drop them to your page.  Reassemble the individual images into a whole image, like a puzzle.  Make sure that Snap to Grid in the Insert Menu is unchecked so that images can be dragged to touch each other.  Use the Zoom Tool in the Window Menu to temporarily magnify the web page for easier manipulation of the pieces of the Image Map. Link these individual pieces to images, files or webpages. • Use a software program that generates Image Maps.  Many are available at shareware download websites.  These programs "map" the image and can export or save the image along with the Image Map HTML code.  The image Map can be added to the page using the HTML Object Tool. note: Because the HTML code that is created by these types of programs may not be standard or compliant with all web browsers, we recommend using the Invisible Object method of creating Image Maps to ensure that your pages can be viewed by all users and so that your pages will display properly in all web browsers. A problem with Image Maps, as coded traditionally by most editors and developers, is that Search Engines will not follow the links.  Whereas, Cool Page "Image Maps" (which are really just links from superimposed Invisible Images) are just normal links.