Creating Image Hotspots

Image Hotspots allow the creation of separate clickable links for different areas of the image. An image with such Hotspots is called an Image Map. Image maps can either client-side or server-side maps.

Several web publishing programs and image editors support Image Map creation. This article lists the steps required for setting up client-side image maps the plain old html way.

Usage

<MAP NAME=”shapesmap”>

<AREA SHAPE=”rect” COORDS=207,257,107″

href=”http://ownee.com” />

<area shape=”circle” COORDS=131,86,56″

href=”http://ownee.com/rss/10000hto.xml” />

<img src=”http://www.referpages.com/wp/wp-content/themes/newsone/images/shapes.png” height=”242″ width=”359″

usemap=”#shapesmap” />

</map>

• MAP NAME defines client side image map
• AREA takes the following attributes
  • SHAPE can be a circle, rectangle, or polygon
  • COORDS = coordinates of the hotspot (region)
  • HREF = url of the linked region
• USEMAP identifies the image as a client side image map

Finding the Coordinates

You can use any image editor to get the coordinates. Move the mouse over the shape and look for the x and y numbers displayed.

• For a rectange, the coordinates are the x and y values for the two points as shown in the image above.
• For a circle the coordinates are the value of x and y at Point A (in the image above) and the value of radius. Radius is calculated by subtracting x (of Point B) from x (of Point A).

No related posts.