These instructions are for the creation of client-side imagemaps using Map This old free version. I recommend the use of Mapedit instead, as discussed in my main tutorial of client-side imagemaps. MapThis has extensive help information when you select HELP, please use it to suplement these instructions.
Imagemap development overview using MapThis In order to create client-side imagemaps you need to have two components:
- an inline image saved in gif format: this will not be covered in this tutorial. You can use software packages like MS PowerPoint, Corel Presentations, Freelance and/or Showcase for this purpose. You can also use images copyright-free that you can collect in the Net. See my tutorial on graphics.
- an HTML document using regular markups and including an imagemap created by MapThis.
Creating a client-side imagemap fileTo start this section you need to have created, or have available a gif file that you will use as the clickable image.Then proceed as follows
Creating the hot-spotsInserting the image and creating a link to the imagemap
- open MapThis and you will see this screen.
- select File new and you will see a dialog telling you that you need to select an image. Click OK.
- as soon as you do it, MapThis will open a file dialog for you to select the image you will use to create the imagemap. In the example I selected BIGFISH.GIF.
- select the image and you will see your image inside MapThis ready to be mapped like in this example.
- Open the recently created imagemap HTML page in your preferred editor (avoid Word in this case), as shown in this example in Homesite.
- Only the imagemap was saved, the page is missing the image! Insert the image in the page (in Homesite just drag and drop after the Body tag), as shown in this other example.
- Finally, you need to link the image to the imagemap. Just add USEMAP="#themap" to the image tag, where #themap is the map name, the name you entered in title before. In our example we added USEMAP="#bigfishmap" to complete the page and saved it. Click to see it working.
- Don't forget to upload your page and the image to Home, after testing locally.
This page is maintained by Al Bento who can be reached at email@example.com.
Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided. This page was last modified November 17, 2003.