Image Map Tutorial

Image Maps are a way to create images which have multiple links embedded within them. For instance an image with a map of the United States could be configured so that each state when clicked would link to a web page describing that individual state. Image Maps were once a very efficient way to accomplish this behavior. Today Image Maps are rarely used as other technologies have made the same behavior easier to achieve.

Originally to achieve the behavior of an image map web masters simply made several images, used table to arrange them, and made each image a link. This was time consuming; a single map had to be cut into several image and manually arranged using HTML code to appear as one image. Early image maps used server side code to get the coordinates of the mouse when a user clicked an image. Based on these coordinates a script or program would redirect the user to a different page. In HTML 3.0 the Map tag made it possible to do this all within the browser without having to enable any server side scripting.

HTML Proposals - Includes Proposal for Image Map tags by the HTML Working Group

Server side Image maps vary from server to server. Essentially all work the same however; they send the coordinates of the mouse when a user clicks an image to the server. The server then runs a program or script and sends a header redirect to the browser telling it to open a different page. To do this server side image maps use an ISMAP tag within the image source tag. The HTML Map tag allows for browser only, client side, image maps. To accomplish this a 'usemap' tag is added to the image source tag with the name of a specific map to use. Then a separate map tag is created which is named with the name specified in the usemap. This contains a list of coordinates and links so the browser knows where to link. Coordinates that are not specified do not link to anything.

The easiest way to generate a client side image map is to use a professional Web Design program. Adobe GoLive, Adobe Dreamweaver, and Microsoft Front Page all feature tools to accomplish this. Further numerous web sites have utilities that allow you to upload an image and create the code for an image map without having to enter coordinates by hand.

Today Image maps in general are seldom used. A simple alternative, albeit one that only allows for square linkable areas, is to use tables. In this case the image is made the background for a table defined by the size of the image. Then invisible gifs are placed in table cells with inks to the desired locations. Both Java Applets, and Flash are suitable alternatives for image maps, offering advanced transition effects to enhance the user experience. JavaScript today can also be used to implement Image Map like behavior without any server side coding.

Copyright @ Surveillance-video 2016. If you have questions about your order or would like to place your order over the phone, you can e-mail us or call our customer service department at 800-955-5201. Prices, specifications, and images are subject to change without notice. Not responsible for typographical or illustrative errors.Privacy Policy | Contact Us Home Security Cameras & Security Cameras Systems from surveillance-video.com

Thank you, we have received your request. A customer support representative will contact you shortly.