Freelance 3D Animator, Designer, Artist

Home > 3D Tutorials > Creating Image Maps Using Macromedia Dreamweaver
 

welcome to Glyn Davidson's Tutorials page

Creating Image Maps Using Macromedia Dreamweaver

Download the project files here

 

Task 1:

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.

Image Maps in Dreamweaver

Then copy these four images into your images folder.

Trinity.jpg
Neo.jpg
Morpheus.jpg
Background.jpg

Image Map Tutorial Images

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:

Dreamweaver relative 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.

Basic Image map Page

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:

<body bgcolor="#d8d8d8">

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.

Image map Webpage

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.

Image Map Website Files

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.

Image Map Tool

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

Image Map Tool

 

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

Image Map Hotspots

Your window will look something like this:

Image Map Hotspots

Using the arrow tool in the image map toolbar,

Image Map Tool

 

Click on your first hotspot.

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

Image Map Tool

 

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:

<body bgcolor="#d8d8d8">
<center>
  <img src="Images/background.jpg" width="765" height="425" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="4,349,174,422" href="neo.htm" target="_blank" />
    <area shape="rect" coords="178,348,266,421" href="morpheus.htm" target="_blank" />
    <area shape="rect" coords="411,347,490,422" href="trinity.htm" target="_blank" />
  </map>
</center>
</body>

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.

Open up neo.htm

Delete the background picture.

Goto insert > Image and insert the picture of Neo.

Click on save.

Open up morpheus.htm

Delete the background picture.

Goto insert > Image and insert the picture of Morpheus.

Click on save.

Open up trinity.htm

Delete the background picture.

Goto insert > Image and insert the picture of Trinity.

Click on save.

 

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();

Image Map Tool

Click on Save.

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();

test the site again

 

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.

Bugati Veyron

 

 

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:

 

The Matrix Image Map Website

 
Site Map Terms and Conditions Privacy Policy
 

Glyn Davidson - Freelance 3D Designer, 3D Animator, 3D Illustrator, CG Artist, Graphic Designer, Motion Graphics and VFX

Copyright © Glyn Davidson, 2007-2013, ALL RIGHTS RESERVED


Modify Freelance Animator Site Design Modify Freelance CG Designer Site Design Black 3D Design Portfolio Dark Grey 3D Design Portfolio Default 3D Design Portfolio Grey 3D Design Portfolio Light Grey 3D Design Portfolio Lighter Grey 3D Design Portfolio