This video is going to show you how to add Map Design image maps to Rapidweaver web sites. First, you are going to export your image map, and then choose the Effects based image map, and then choose a location to save the files to. You can see here in the finder where my files are. Now I will switch over to Rapidweaver, and the first thing I’m going to do is add a new webpage. When I do this, I want to make sure I select the HTML Code web page, and then I’ll hit the Add button.

Next, open up the Inspector window. Click on the Assets tab if it’s not currently highlited in blue, and now drag and drop all of the images that you just saved into the Assets listbox. So now all images have been imported, and we’ll now go back to the index.html page. The first thing we’ll want to do is fix the file path. Right now the folder is pointing to images, but Rapidweaver uses the assets folder, so we’ll want to replace all of the code pointing to the images folder. To do this, highlight the text, and then press command F, and in the Find field, type in images, and in the Replace with field, type in assets. Then, click the Replace All button.

Now we’ll just copy all of the CSS code in this document, which is all the code within the Style tags. The first one is closer to the top and then we’ll scroll down until we find the ending Style tag. Then we’ll copy all of this highlighted code.

Now we’ll go back to the Inspector window, and  we’ll locate the CSS tab, and then paste what we just copied into the Custom CSS field box. We’re done with the page inspector so we can close that window.

Now we’ll copy just the HTML code in that previous html document, which is just the little snippet right here, and simply paste it into this Rapidweaver HTML field, and now we’re done. You can preview your image map in Rapidweaver by just clicking this preview tab here.