TechNote (Archived)

How to incorporate image maps in templates

When working in documents based on a template, you may not always be able to add or modify image maps. After providing some introductory material about the source code for image maps in template regions, this TechNote suggests workarounds for adding or editing image maps when working with templates.

First, reviewing some information about image maps and templates will be helpful in understanding these issues.

Client-side image maps
A client-side image map is comprised of two separate pieces of code: a reference to the name of the map in the <img> tag, and the<map> code itself. When an image map is created in a document, Dreamweaver adds the following to the source code:

	The image map name (highlighted in red below), referenced within the<img> tag.
	Example: <img href=".../images/logo.gif" name=logo >
	Theimage map code (highlighted in red below), which contains the various hotspots that make up the map. The image map code is often writtenbefore the ending</body> tag.
	Example: <map name="logoMap"><area shape="rect" coords="0,23,54,46"><area shape="rect" coords="0,0,54,22"></map>

Templates
Content in templates is either in a locked region or in an editable region. A locked region contains
elements that will appear on each document based on the template. Locked regions cannot be selected or
changed in the document itself; they must be changed in the original template. An editable region contains elements that vary from page to page. Such elements are editable in documents based on the template. For more information on the issue, see Understanding editable and noneditable regions in templates (TechNote 14804).

Adding an image map to the editable region of a document based on a template
Sometimes you cannot add hotspots to an image because the <map> code is attempting to write itself in a locked region. In that case, you can copy and paste from a new document both necessary pieces of code into the editable area, as described below:

Pasting the image map code from a new document into an editable region

1	Open a new HTML document that is not based on a template.
2	Save the new document into the same folder that holds the document based on a template (the one you ultimately wish to add an image map to). Note:If the new HTML document is saved into a different folder than the folder holding the document based on a template, the path to the image may be broken in the document based on a template.
3	Insert the image into the new document.
4	Select the image.
5	Add hotspots to the image usingthe tools at the bottom left of the Property inspector.
6	Launch the Code inspector or switch to Code view to view the HTML source code.
8	Copy and paste the source code for the image map (both the <img> tag and the<map> tag information) from the new document into an editable region of the document based on the template. Example 1 displays sample image map code in the new document; Example 2 shows the image map code pasted into an editable region of a document based on a template.

Adding an image map to a template (DWT) document

	If you do not intend to make any changes to the image map, and need it on every page, you can insert the image map into a locked region. The process is no different than adding hotspots in any HTML document.
	If you plan to make changes to the image map in documents based on the template, first insert your image into an editable region. Dreamweaver may still place the image map code in a section of the HTML which is not editable. Example 3 shows image map code which has been placed in an area of the HTML which will not be editable in documents from template. In that case,you may have to cut and paste the image map code into an editable region (as illustrated in Example 4).