How to make an ImageMap

Creating an imagemap is a way to divide a picture in order to create several hyperlinks. If you click on different areas of the picture, the website will redirect you to different web pages. In order to do this, you will need to create an imagemap of the picture so that the browser knows where the user has clicked on the image and where they need to be redirected to as a result.

There are several ways that imagemaps can be created. You can use server-side or client-side image maps and we will tell you a little bit about each kind.

When creating a server-side imagemap you place some special HTML code on your webpage. When the image is displayed on your web page, the user has the option of clicking on various different locations of this image. Once they have done so, the location of their mouse click will be sent to the web host where a program resides that will determine what needs to be done.

You can program the web server to do two different things when a visitor of the website clicks on an image. It will either direct the information to a custom script that has been written by the webmaster, or it will have its own process in which you can specify what needs to happen for each area of the picture that is selected. This is usually done by configuring a text file that the web host will refer to for instructions. Be sure to check with the web host on how these requests are handled because there are also a couple of different text file formats that are used to give the instructions to the web server.

There are some disadvantages to using the server-side imagemaps that need to be considered. First of all, every time the user clicks on an image, there is a request sent to the server causing the use of bandwidth at a much faster rate. If you have limitations on this, you may have to pay more to keep your website on a particular web host. You may have to change to a different web host if the one you are currently using does not support these features. You also cannot make your images dynamic to give hints to the users that the image can be clicked on.

If you are using client-side imagemaps, the user's computer will be responsible for processing the code that is used in the imagemap you have created. This is done using only HTML to ensure compatibility with any web browser and you can give the user of your website visual clues as their mouse passes over the different areas of your picture that can be selected. However, the code involved in setting this up is very extensive and time consuming. There is a better way that will work well and is easier to accomplish.

In order to easily get a client-side image map working, there are few programs that you can use to help you set things up. Two of the easiest to use are WebHotspots and Trellian ImageMapper.

WebHotSpots will allow you to trace around different regions of your image with your mouse to highlight where you would like selections to be available on your picture. It is easy to make corrections and once you have completed, the program will write the HTML code for you.

Trellian ImageMapper will give you the option of creation rectangular, circular or polygon areas on your images that can be selected. Once you have selected the regions that you would like to use on your picture, the program will write the HTML code for you. You can even use a previewer to make sure that everything works the way you would like before post the code into your web pages.

Just remember to be patient when creating your imagemaps. In order to make them successfully, you will need to take your time and be sure to review the code that you are using, even if it is generated for you in a imagemap creation program. Be sure that you test the final product in as many web browsers as possible as well to ensure that the visitors of your site will be able to navigate through the imagemap without any issues. It is also a great idea to provide an alternative to the imagemap such as a small navigation bar at the bottom of your page, just in case they do not figure out how to select the different areas of the picture you display.

Web Hosting Home | Hosting News | Articles | Sitemap | Partners | Contact Us

© 2005 Copyright - Hosts2002.com