You can use any .gif .jpg or .png image that you want to make an imagemap. All you need to do is create the co-ordinates on the image in order to get it to work as a map. Your image editor will probably have a grid system on it to help you find the coordinates.
Please hit the various sections of the image to the right (I have chosen to use a .gif) to discover how to get the co-ordinates and encode that part of the imagemap.
large blue circle . green rectangle . dark green triangle
Remember that images on the www are pixel images. The above image is 300 pixels by 250 pixels. The first pixel on the x-axis is at the top of the image. The first pixel on the y-axis is on the left of the image.
To make an image into an imagemap, add usemap="#usemapname" into the image tag. Your alt spec should also describe roughly where on the image the links are: alt="imagemap circle:circle contents, rect:rectangle contents, poly:triangle contents". Each area should also include an appropriate alt spec. For instance, for a circle area: alt="imagemap circle:circle contents". Note also that there can be title specs for each area of the image. The image tag is then followed the map tag.
Here is an example of how the code will look - obviously the width and height specs will be filled in with numerical values that are the same as the width and height of the image used for the usemap.
<img src="imagename.jpg" width="xx" height="yy" border="0" usemap="#usemapname" alt="imagemap - description of links" title="imagemap - move cursor over image to locate links" /> <map name="usemapname" id="usemapname"> <area href="1stlinkname.html" shape="circle" coords="x,y,r" alt="circle contents" title="circle contents" id="circle_contents" /> <area href="2ndlinkname.html" shape="rect" coords="x,topleft-y,x,bottomright-y" alt="rectangle contents" title="rectangle contents" id="rectangle_contents" /> <area href="3rdlinkname.html" shape="poly" coords="x,y,x,y,x,y,x,y" alt="polygon contents" title="polygon contents" id="polygon_contents" /> </map>
N.B. Please ensure that you also have simple text links to the links on your image map. Not all browsers support imagemaps.
code:<a href="#circle_contents">circle contents</a> | <a href="#rectangle_contents">rectangle contents</a> | <a href="#polygon_contents">polygon contents</a>
0 : : ___________ : | | : |___________| : : 0-+-------------------X : YIn the image I chose, the top left corner of the rectangle area is 0 pixels from the left and 160 pixels from the top. The bottom right corner is 180 pixels from the left and 195 pixels from the top.
0 : : ,| : , | : , | : , | : , | : , | : ,____________| : : 0-+-------------------X : YIn the image I chose, the polygon(triangle) area has one point 300 pixels from the left and 70 from the top, one point 300 pixels from the left and 200 from the top and one point 165 pixels from the left and 250 from the top.
0 : _ : ,' `. : : : : : ; : `. _ ,' : : 0-+-------------------X : YIn the image I chose, the center of the circle is 95 pixels from the top and 75 pixels from the left of the image. It has a radius (straight line drawn from centre of the circle to the outside edge) of 65 pixels.
© llizard 2001, 2003, 2007 ( last modified 27 March, 2007)
CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page