Image Maps
Mount Rushmore ~ Texas ~ Computer Ease
Image Maps Tips
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.
Determining coordinates:- 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
The first 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" alt="description" height="300" width="300" />
<map name="mymap">
<area shape=rect alt="example" title="example" coords="0,0,133,20" href="../index.htm" />
</map>
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
Tips
- Include text links via a list or menu bar for those that are blind or have turned images off.
- Use or create images with clearly defined areas.
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.