Image Maps

Mount Rushmore  -  24Hour HTML Cafe  -  Bookstore  -  Alabama   -  Advanced Image Mapping  - Image Maps & Web Page Design

Download: Mapedit

JavaScript, Photoshop, Flash and Fireworks are often used to create image maps. But for those not familiar with JavaScript, having access to expensive software, or wanting to deal with Flash display issues, inexpensive software creating image maps fills that niche.

A clickable image is like a collection of links added to an image, creating "hotspots" on the image itself. Viewers can locate the hotspots by passing the cursor over the image.

How does it work?

Image map components:

• image
• map definition
• supporting HTML coding

The map is defined by various shapes. Rectangles, circles, and polygon shapes are "drawn" onto the image via an image map editor. The hotspots are identified to the browser by their pixel location.

• image maps utilize x,y coordinates for defining what area of your image will be a hotlink.
• each x,y pair specifies a pixel location on the image
• the starting point, where x and y both equal zero, is the upper left-hand corner of your image.
• x value (width) increases as the user moves to the right
• y value (height) increases as the user moves down

Shapes:

• point - coordinates of a particular "spot"
  
• circle - coordinates are center (x,y) and edgepoint (r)
  
• rect - coordinates are upper-left, lower-right
• poly - coordinates of vertices.

Image Map Coding

Map tag attributes
     Name - name provided in the USEMAP attribute inside the image tag

Area tag attributes
     shape - type of hotspot (circle, rect, poly)
     alt - textual description of the URL you are linking to
     coords - define the clickable areas by pixel locations
     href - URL of link associated with the hotspot

<map name="mymap">
<area shape=rect alt="example" coords="0,0,133,20" href="../index.htm">
</map>

So far we've used only one component, the html coding for the map tag. The second necessary component is the image file that the hot spots refer to. In this example it's called "mymap.gif"

<img src="mymap.gif" usemap="#mymap">

All image attributes continue to work with your image map:

<img src="mymap.gif" border="0" usemap="#mymap">

Image Map software:

Dave Central
About.com
Image Map Resources
Map This!
Image Map: Free and Shareware
Softseek Image Map Search

Return to the Top

Tips

• Include text links via a list or menu bar for those that are blind or have turned images off.
• You can also map an area as NOHREF - clicking in that region performs no action whatsoever.
• Use or create images with clearly defined areas.
• Use or create images that can be displayed without scrolling down the screen.
• Complex images and image maps will slow down the amount of time required to download your page.

You can use the ISMAP coding to determine x,y coordinates:

• create a HTML page with an image inside a fake link
  <a href="nothing"><img src="myimage.gif" ismap></A>
  
• open the page in Netscape
  
• the image will display as an imagemap - but without connecting links built in.
  
• move your cursor over the image
  
• the x/y coordinates will display on the status line

You can also determine x,y coordinates by using a newer Paint progam (under Accessories):

• open Paint.
  
• open your image.
  
• click the Select dotted square or other shapes located on the bottom of the toolbar.
  
• click on the starting point of your hotspot. Jot down the x,y coordinates that are located in the lower right corner of Paint.
  
• create the shape and size of your hotspot. Jot down additional x,y coordinates.

Before you start

• Create the basic webpage that will contain the image map, including the image coding for the image itself <IMG SRC="…">.
• Create a list or menu bar of the web links to be added as hotspots to the image. These are generally located below the image.
• Map out the areas of the image that will become hotspots.
• Define where each image hotspot will link to.

Return to the Top