Dreamweaver Image Maps Tutorial

When starting any new project the first thing to do is Always, Always create a new folder to store all of the project files together.

With this in mind the first step is to create a folder called ‘Website Matrix’.

I always like to start the folder name with the word website, that way it keeps all of your website folders together when sorted alphabetically.

Within your ‘Website Matrix’ folder create an ‘Images’ folder.

Then copy these four images into your images folder.

Click on the tumbnails above to get the images (I used an image map).

Now open up Dreamweaver

Whenever you create a new page the first step is to Always, Always save the page into your designated folder.

That way when you insert an image Dreamweaver will generate a relative path instead of an absolute one.

Hint. Dreamweaver will give you the following warning when it creates an absolute path:

So to stop this happening, save the file first.

In this instance we want to save the page as index.htm.

You could just as easily call it home.htm or default.html

With the file saved, go to insert > image

The ‘Select Image Source’ dialogue box should open in the directory where you saved your web page. This makes it easy to now find our images.

Open your images directory and then open background.jpg

Your page should now look something like this.

This is all that is going to appear on our home page!

Click F12 and view the page in a browser.

Not very appealing huh?

With two slight changes we can make a huge improvement.

First of all centre the image.

There are two ways to do this. The first is to click on the image and then click on the centre align button in the property inspector.

The second way is to switch to code view and wrap the image tag in centre tags. Like this:
<center><img src="Images/background.jpg" width="765" height="425" /></center>

Personally I prefer the second method as it prevents the WYSIWYG editor from adding DIV tags which can be confusing to the browser.

The second change we are going to make is the background colour.

Again there are two ways of doing this, using the WYSIWYG or using the code. Again I opt to use the code as it prevents Dreamweaver from adding erroneous data.

To change the background colour in code view, add the following to the body tag:

The other way would have been to click on Modify > Page properties and change the background colour there. But in doing this Dreamweaver would generate CSS styles to colour your background which in this instance is not what we want.

Press F12 - Looking better already

And that’s it for the look of the home page.

Save your file before we move on to the next pages.

The easiest way to create the pages that follow is by doing this:

With your index.htm still open, go to File > Save As and save the file as neo.htm.
Then go to File > Save As and save the file as trinity.htm.
Then go to File > Save As and save the file as morpheus.htm.

You should now have all four web pages saved in your ‘Website Matrix’ Directory.

Now that we have created the files we need to make changes to them.

Open up your index.htm again.

At the moment there no links to the other pages. To fix this we are going to use image maps.

Click on the background image and the image map toolbar will appear in the property inspector.

The tool bar lets you create three different types of ‘Hotspots’ on your image. A rectangle hotspot, an oval hotspot, or a polygon hotspot.

We are just going to use the rectangle hotspot.

Click on the rectangle hotspot tool

And draw hotspots over the following areas of the background image.

Your window will look something like this:

Using the arrow tool in the image map toolbar,

Click on your first hotspot.

In the Link textbox, type ‘neo.htm’ and change the target to _blank

Changing the target to blank will cause the page to open in a new blank browser.

Now change your second hotspot to open morpheus.htm in a blank window.
And change your third hotspot to open trinity.htm in a blank window.

If you format your code it should look something like this:

Don’t worry about the numbers, they are just the position and location of each of my hotspots.

That’s the home page finished. Go to Save As and make sure you save it is index.htm

At the moment all of your other pages look exactly the same so we need to make changes to them.

Delete the background picture.

Goto insert > Image and insert the picture of Neo.

Open up morpheus.htm

Delete the background picture.

Goto insert > Image and insert the picture of Morpheus.

Delete the background picture.

Goto insert > Image and insert the picture of Trinity.

Now let’s test it.

Return to your index page and hit F12.

Check to see if your links work.

You may have noticed that the ‘Close window’ isn’t working on each of the character pages.
That’s because we haven’t told it to yet

Return to your neo page in Dreamweaver.

Draw a hotspot around the words ‘Close window’.

In the link text box type javascript:window.close();

To create the image maps on the other two character pages, simply copy and paste the one you have just created.

Remember to save the files each time.

Once you have finished switch to index.htm and hit F12.

Hopefully everything now works.

Note: javascript:window.close(); doesn’t always work in firefox.
Also calling any javascript on a webpage that is saved locally will ring Window’s alarm bells.

Task 2:
If you are happy with this tutorial why not test your understanding?

Rather than opening the image in a new window, it might have been better to open it in the same window?

To do this change the hyperlink targets on your index page from _blank to _self.

Then on each of your character pages change the link from javascript:window.close(); to
javascript:history.back();

Task 3:
Create an image map site of your own.
It can be about anything you like.

When creating this tutorial I thought about using the following image and having separate pages for each of the car components.

A Final Note:
It is not recommended to use image maps as the only source of navigation.

Instead you should provide the user with alternative hyperlinks.

In this instance our example it may have looked something like this: