Home | About | Online Examples | Types of Photographs | Enhance | Catalog | Manipulate |

Types of Photographs: Image Maps

You will create 4 HTML pages that are linked through an icon on a map to the photographs taken from that location.

Images for HTML using Adobe Photoshop
Map for HTML using Adobe Photoshop
Create HTML Image Map using Macromedia Dreamweaver
Link Documents using Macromedia Dreamweaver

This is a short and simple exercise with big payoff.

Images for HTML

In this exercise, we are going to take a map and a group of photographs we have taken and link them together to create a web page with a map that links to a web page of a photograph.

First, size your images so that they are web ready. If you are going to place them on the web this step is very importnat, but if you are going to run them off a CD, you will want your images as large as possible without having to scroll to the right.

Images will appear at different physical sizes depending on the screen resolution, the larger the screen resolution, the smaller the image. Typical screen resolutions are:
800 x 600
1024 x 768
1280 x 1024

File format for images on the web are as follows:

Jpg, Jpeg File format for photographs.
Gif File format for Raster graphics not photographs.
Png Great for both Raster Graphics and Photographs but not supported by all web browsers.

Resolution for the screen is 72 pixels per inch. This is the general guideline but it is an arbitrary number someone came up with ten years ago. Typical image resolutions for the screen can be:

72 pixels per inch
150 pixels per inch
300 pixels per inch

Image size is also measured in kilobytes. A general rule of thumb is to keep HTML pages under 250 KB to enable easy downloading. If only 1 image will appear per page, then keep you images around 200 KB.

Photograph Sizing
Size the image so that the width is around 600 pixels in Adobe Photoshop.

1. Open Adobe Photoshop

2. Choose File/Open to open the phtograph called attached_single.jpg

3. Choose Image/ Image Size

4. Make sure Constrain Proportions and Resample Image boxes are checked at the bottom of the window. Change the Resolution to 72 pixels per inch. If the image is 300 pixels per inch, the image becomes very small when the resolution is changed to 72. In this instance, I suggest not changing the resolution (keep the image big) but add compression to make the file size smaller. You will do this when you save the image.

5. If the width is larger than 600, change it to 600 pixels. If it is smaller than 600, leave it. Select OK.

6. Complete steps 2- 5 for the photographs duplex.jpg and commercial_dev.jpg

7. Save these 3 images in a seperate folder you create.

8. When you go to save, choose File/Save. You will see a pop up box appear like the image below. Double check the size at the bottom to ensure you have not exceeded 200 K. If it does, use the slider to change the quality of the image from 12 until the size is under 200K, around 10 quality.

These images are named to contain no spaces. When creating images for the web, use an underscore "_" between words to avoid spaces.

Now we have 3 images that are 600 pixels wide, attached_single.jpg, duplex.jpg and commercial_dev.jpg saved in a seperate folder created by you.

Map for HTML

If you have already completed the Adobe Illustrator seminar, then you are familiar with vector files. The map you are about to open was created in Illustrator by tracing another map.

1. In Photoshop, open the file called future_landuse.psd. You will notice several different layers. If you do not have your layers palette open chose, Window/Layers.

2. The image has already been sized for you. It is 700 pixels wide. Using the Move tool in the Tools Palette, Window/Tools, select one of the cameras and drag it to a desired position.

Place the camera icons to match the land use of the photographs previously resized. For this exercise, you want to place one camera in a corresponding position to each opf the 3 images. Attached_single.jpg should be placed over a yellow parcel, duplex over a brown, and commercial over red on the map (see map legend). The cameras will become links to the images.

3. Save the file first in its native format (.psd) to preserve the layers in the folder you created previously.

4. Save the image for the web by selecting File/Save for Web/. Choose Gif from the file options with the selected options shown below. Select the Save button and save the file in the folder you created previously.


Create HTML Image Map using Macromedia Dreamweaver

Now that your images are prepared for the web, you are giong to create serveral simple HTML documents in which you will link the photographs to the map using the camera as the hotlink "button."

Here is the example you will be creating.

1. Start Macromedia Dreamweaver.

2. Choose File/New Select, Basic Page, Press Create. You need to save the file before you import images into the document. Unlike Microsoft word, where you embed images in the document, HTML pages "link" to the images shown on the page and should be saved in the same folder as the images used in the document. Save the blank document in the same folder you save the photographs from the previous steps.

3. Next you will import the future_landuse.gif image into the blank HTML page. Choose Insert/Image from the menu. Select the landuse image from the folder of the saved image. Select OK.

4. Select the landuse image and notice the property box at the bottom of the page. Choose Window/Properties if you don't see the Properties panel. You will find in the bottom left corner of the panel the word Map with a text box and 3 blue icons under it. Give your image map an appropriate name in the text box.

5. Now click on either of the blue icons which are hotspots drawing tools (Rectangular, Oval and Polygon hotspot tools). Hotspots are like links only difference is that they have location co-ordinates on the image.

6. Draw the hotspot area over one of the cameras in which clicking on the area should go to a particular link.

7. Name the link in the link box the name of the image.htm. For instance, you have 3 images: attached_single.jpg, duplex.jpg and commercial_dev.jpg. Choose one of the images to name the corresponding linked page such as attached_single.htm. This page will contain the corresponding image. You will create these pages next.

8. Draw 2 more hotspots over the remaining 2 cameras and name them accordingly.

9. Choose File/Save to save the file.

Link corresponding HTML pages using Macromedia Dreamweaver

1. Choose File/New Select, Basic Page, Press Create.

2. Save the file 1 of the three htm pages you just linked to, for instance, we will make this page attached_single.htm.

3. Now, you want to insert the image into the document. Choose Insert/Insert Image. Select the attached_single.jpg image.

4. This page is almost complete. There are 2 things remaining. You will want to give this page a title and you will want to create a link back to the map. First, give the page a title. At the top of the document in Freamweaver, there is a place for the title. Change the name from Untitled Document to something else by selecting the text and typing in the box.

5. Open the page containing the the landuse map. If it is already open, minimize the current page and mazimize the other page by choosing the left button ( _ ) at the top of the page.

6. Create some text that gives the document a title in the body of the document, just above the image. In my example, I called the map, Land Use Map for Jacksonville, FL. Select the text and choose, Edit/Copy.

7. Save the file, then return to the HTML page contaiing the photograph. At the top of the page paste the text, Edit/Paste. Select the text

you will see in the Properties panel a space for the link. Choose the drop down arrow and find the page you just saved with the Landuse map in it. Or choose the folder to the right of Link box and select the name of the file. You have just created a link back to the landuse page.

8. Save this file, repeat steps 1-7 for the remianing 2 images.

You now have 4 HTML pages that are linked through an icon on a map to the photographs taken from that location.


To transfer these files off your computer and onto the web, you will need to FTP them. Here is a tutorial about how to FTP through Dreamweaver.
Understanding FTP
Preferred Software for FTP, Free Version Available

Return to Types of Photographs.