University IT » Web Services » Help » Graphics » Clickable
Web Help - Graphics
Creating "Clickable" Imagemaps
An imagemap is a graphic with "hot spots" that you can click on to go to different pages.
Creating the Image
Use a scanner or graphics program such as Photoshop to create the picture as usual. Remember it should be in GIF, JPEG, or PNG format. Decide which areas of the picture are going to link to which pages.
Creating Client-Side Imagemaps
Client-side imagemaps do not require the presence of a server-side script in order to interpret the coordinates of the "hot" regions of your multi-clickable image. The client-side imagemap is much more efficient than the server-side imagemap and it allows the visitor to see the actual URL associated with the mapped regions in the status bar of their web browser.
- Download a mapping program to create a map file based on the desired image. The map file will contain the coordinates of each clickable region. We recommend MapEdit (PC) and WebMap (Mac).
- Map out the hotspots using one of these programs and select the map file format "Client-side imagemap" as opposed to NCSA or CERN (for server-side maps) prior to saving the file.
Here is a sample client-side map file created using MapEdit:
<map name="sample">
<area shape="rect" coords="20,27,82,111" href="http://www.rochester.edu">
<area shape="circle" coords="129,113,29" href="http://www.rochester.edu/UCC">
<area shape="poly" coords="21,158,170,211,50,50" href="http://www.rochester.edu/CES">
<area shape="default" nohref>
</map>
- Include the map file code within the desired HTML document and reference it like so:
<img border="0" src="image.gif" usemap="#sample">Substitute the name of the desired image above and note the relationship between the HTML tag, <map name="sample"> and the usemap="#sample" attribute above. You can test your new client-side imagemap offline if the links refer to files on your local PC.
