TechNote (Archived)

Assigning behaviors to an image map

In Dreamweaver 3, assigning a behavior to an image map is straightforward: select the appropriate hotspot and assign a new behavior with the plus key of the Behaviors inspector.

However, in Dreamweaver 2, the procedure requires using a dummy image to generate the JavaScript and editing the HTML source to reassign the code. The instructions below outline this procedure step by step. Once again, this only applies to Dreamweaver 2.

To edit the HTML source code in Dreamweaver 2, do the following:

1. Insert an image in the Document window. This image will serve as a dummy in the document and will be deleted after completion of the task.
2. Assign a null link to the image by selecting it and entering a pound (#) sign into the Link field of the Property inspector.
3. Select the anchor tag of this dummy image and assign the desired behavior to it. (A quick way to select the anchor tag of an image is to select the image then click the <a> tag displayed in the bottom left corner of the Document window.)
4. With the anchor tag of the dummy image selected, open the HTML inspector (F10).
5. Find the behavorial JavaScript within the highlighted HTML. The code below is an example of the JavaScript section in a sample document.

    <a href="#" >
   		
   
   	<img href="/support/dreamweaver/ts/documents/assets/Creation.JPG"     name="creation" ></a> 

6. Copy the JavaScript that represents the mouse events. In this example, copy the red color code. This Javascript activates the Swap Image behavior using the onMouseOver event.
7. Locate the map tag in the HTML source code that is referenced by the "usemap" attribute of the final destination image. You can find the "usemap" attribute within the destination image tag.

    <img href="/support/dreamweaver/ts/documents/assets/myImage.JPG"  
   		
   
   	   > 

8. Paste the code inside the area tag for this image map.

    <map name="myName"><area shape="rect" coords="5,4,153,43" href="#"        tar ></map> 

9. Delete the dummy image created in step 1.

Search Support

---