Create an Image Map

This tutorial will show you how to create an image map in Dreamweaver CS5.

We're now going to look at a useful tool for providing useful links based on an image with several elements.

Let's suppose that we're producing a web site about the states of the USA. The map looks like this.

With the image selected, I can see the Properties Panel, and in the bottom right hand corner of the panel are three hotspot tools.

Now I select the Rectangle Hotspot Tool and use it to draw an outline around Wyoming (a conveniently shaped state!). When I finish drawing I see this message.

Click OK and I see the state of Wyoming outlined as a hotspot and the Properties Panel now relates to that hotspot.

On this occasion I'm going to make the link go to another place on the same page, and so I specify a named anchor of "wyoming".

I specify that the Target will be "_self", i.e. in the same browser window. If I was going to link to (say) an external website about Wyoming I might use "_blank" here.

I also enter suitable Alt Text, then click OK.

Having made those changes, I enter a heading for my Wyoming text and insert the required named anchor.

Now try it out using Preview in Browser. You can also test it in Live view, although to hyperlink you need to hold down the Ctrl key while you click with the mouse.

What I have started is an image map. Using one image I can make parts of the image hotspots that link to other internal or external resources, such as named anchors and other web pages.

To complete this image map I would work my way through the states, creating a hotspot for each one. The polygon hotspot tool could draw a suitable outline round even the most irregularly shaped states, although it might take a little while to make the shape accurate enough.

A similar approach can be used for (for example) the points of interest in a town map, or the stores in a mall.

More Dreamweaver CS5 Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Getting Started Create a Web Site Create a Web Page Create a Web Page from a Template Open & Save a Web Page Closing a Web Page File The Dreamweaver Environment Working with Toolbars Working with Panels Creating a Workspace The Status Bar Working with Views Changing the View / Zoom Tool Working with Rulers Grids & Guides Keyboard Shortcuts Setting Preferences Using the Results Panel Managing Website Files Setting Up Site Folders Using the Files Panel Creating Files Managing Files & Folders Finding Files in the Files Panel Setting the Home Page Setting Link Page Properties Setting Page Properties Working with Invisible Elements Working with Colors Understanding File Paths Working with Text Adding Text to Pages Importing Content Selecting, Copy & Paste Text Modify Font Families Formatting Characters Formatting Paragraph Text Controlling Line Spacing Horiztontal Rules Ordered & Unordered Lists Create & Apply Text Styles Finding & Replacing Checking Spelling Setting Font Preferences Using Undo and Redo Working with Images Using Web Friendly Graphics Defining an Image Folder Inserting Images Inserting Images form Photoshop Editing Images in Photoshop Inserting Images from Fireworks Optimizing Images for the Web Modifying Images Aligning Images Margins around Images Changing Brightness & Contrast Creating Rollover Images Inserting an Image Placeholder Linking Web Pages Understanding Link Types Understanding File Paths Adding a Link Adding an Email Link Using Named Anchors to Link within a Web Page Create an Image Map Modifying a Link Removing a Link Changing Links Sitewide	Web Page Tables Working with Tables Switching Between Table Modes Inserting a Table Modifying a Table Adding Content to a Table Import/Export Table Data Adding Columns and Rows Resizing Columns and Rows Spliting and Merging Cells Sorting Table Data Changing Table Properties Changing Cell, Row, or Column Properties Using a Tracing Image Cascading Style Sheets Introducing Cascading Style Sheets Creating a Web Page with a CSS Layout Creating a CSS Style Applying Internal Styles Attaching an External Style Sheet to a Page Removing Internal Styles Using the CSS Styles Panel Setting CSS Properties Working with CSS Rules Working with ID Selectors Create and Apply an ID Selector Formatting CSS Code Flash & Multimedia Inserting a Flash or Shockwave Movie Changing Movie Properties Inserting a Flash Movie Linking or Embedding a Sound Creating Web Forms Creating a Form Inserting Form Objects Modifying Text Fields and Text Areas Modifying Radio Buttons and Check Boxes Modifying Lists and Menus Inserting an Image Button Making Form Objects Dynamic Validating Forms Creating Templates Creating a Web Page from a Template Creating a Template Opening a Template Defining Editable Regions Creating Repeating Regions Creating Optional Regions Creating Nested Templates Updating a Template Attaching and Detaching a Template Managing A Web Site Defining Local Info for a Site Defining Remote Info for a Site Transferring Files Comparing Local and Remote Files Checking Site Files in and Out Synchronizing Site Files
You can Buy Dreamweaver CS5 for both the Mac and PC platform. If you're a student you can purchase Dreamweaver CS5 for Teachers and Students at special academic pricing.

 

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

<a href="http://www.create-a-great-website.com/create-an-image-map-cs5.html" target="_top">Create an Image Map in Dreamweaver CS5</a>

It will appear on your page as: Create an Image Map in Dreamweaver CS5

 

Share this Webpage

 

This site proudly build with Site Build It!