creating an Image Map

what?An image map adds one or more hyperlinked areas(or hotspots) to a single image.

why?You have a group photo as an exhibit in TMG, you are building a web site, and would like the users to be able to identify the people by running their mouse over each person and by clicking on the individual be taken to their entry.

Navigation: Page Down to advance Page up to return

creating an Image Map

what you need

TMG Images TMG Utility

where to get it http://www.johncardinal.com/tmgutil/

Navigation: Page Down to advance Page up to return

in TMG

Attach Exhibit make some notes about the image

you will need each person’s TMG id# if the group is large and you want to attach the image to

everybody you may want to consider using a custom photo tag with everyone added as a witness, the History tag or a custom tag in the history group * might be a good choice.

this method will be described first, the subsequent method will describe applying an image map to an image attached to multiple individuals.

close TMG TMG & TMG Utility may not run simultaneously

*History group tags have only witnesses

in TMG Utility

Open the dataset Under Exhibits select Edit Image Map Click the Edit Exhibit Image Map button Choose the Image

TMG Utility continued

The image opens in TMG Utility Drag a rectangle around a person or area Click Edit Properties Enter information in the Area Properties dialog box

HREF: the person’s TMG id# in the form p#nnn Title: the person’s name (or other text) Alt: the person’s name (or other text)* Click OK

* Technically the ALT attribute is required, and is designed to be an alternative text description for images. ALT text displays before the image is loaded (if it's loaded at all) and is displayed instead of the image in text-based browsers. The TITLE attribute is optional. In a standards compliant web browser, like Firefox, the ALT text does NOT display unless the link to the image is broken, where Internet Explorer(6) will display the ALT text if the TITLE attribute is not present, therefore you should enter something in both attributes.Information in the ALT attribute is also an accessibility enhancement for vision impaired users.

TMG Utility continued

Repeat the process of drawing a rectangle around each person, and completing the Area Properties for each

When finished click File,then Save Image Map & Close

If Log only mode is enabled you will be prompted to save changes to image map

*In this example the image was attached to a custom Group Photo tag created in the history group the reason will be evident after seeing the next example.

TMG Utility continued

In this example an image is attached to 3 people (#63, #127, & #129)

Create the image map as previously described (note the id# of the person you are creating image map for [#63] in this example.)

Before Saving & Closing Click File then Show HTML A TMG Utility dialog box will open

Click Copy Text to Clipboard then click Save & Close

Close TMG Utility & Open TMG

in TMG

Navigate to one of the other people who have the image attached (#127 or #129 in this example.)

Activate the Exhibit Log Select the image Right click and select Properties Click the Description tab Position the insertion point in the Description field,

right click, and select paste, placing the HTML for the image map in the description field.

Click OK Navigate to the next person and repeat the

process.

Conclusion

As you may have noticed had I attached the first group photo as an exhibit to each individual I would have had to open the exhibit log for each person, and paste the image map into the description field 9 times.(TMG Utility did the first one.)A tedious and error prone process to say the least.

Please see the addendum for an easier but slightly more advanced method.

Conclusion

Map is a standard HTML Tag Image maps may be used in any image. Image maps may be built manually. Other software is available to build image maps. TMG Utility can be used to build image maps for

use outside TMG and Second Site. Any HTML where an image is used (the other button ~ Edit Image Map.)

Image map areas may be other shapes, circles, and polygons, for example, but TMG Utility only supports rectangular areas.

Second Site recognizes p#nnn in the HREF attribute of the image map and constructs the links accordingly.

addendum: Another method

Found on Secondsite-L

http://archiver.rootsweb.com/th/read/SECONDSITE/2006-02/1139019996

“If you want the image to stay attached via person exhibits, here's a trick...

Attach the image to all the people as you have done. Don't bother creating any image maps yet.

Set the Alternate Image Folder option to a folder on your PC. You may want to create a special folder for this if you haven't already.

Copy the image file to the Alternate Image Folder.

In TMG Utility, use the [Edit Image Map] button.NOTE THAT YOU DON'T WANT THE [Edit _Exhibit_ Image Map] button; use the lower button.

Navigate to the copy of the image that is stored in the Alternate Image Folder.

Use the Image Map Editor to define the map.

Save the image map. When you use the Image Map Editor on an image file by navigating directly to it, rather than through an Exhibit, the map is stored in a .MAP file with the same name as the image file. For images in the Alternate Image Folder, SS will see the .MAP file and will use it for the image. If the same file is attached to multiple exhibits, I am pretty sure SS will use the map for all the exhibits.”The article says this method is untested, however I did test it, and it works.