How do you use image map in HTML?

Answer 1

It is hard here to explain this, without any pictures to specifically work on, so the best that can be done is to give general points and some sample code which you would have to adapt to suit your own requirements. So this is just the general idea of what image maps are and how they are created.

Image maps allow you to have an image set up so that you can put your cursor over different parts and click to bring you to a different webpage than if you click on another part, or even just show a label over one part that is different to a label in another part. So you might have a photo with several of your friends and family in it. When you put the cursor over one person's face, a piece of text will pop up to show their name. When you put the cursor over a different person in the same photo it will show their name. That is the kind of thing that you can do. It takes a bit of work because you have to know the size of the image and where exactly the particular parts are, like someone's face, so that the text only pops up when the mouse is over just that part of the photo. To make an individual image a link use the following code, noting that the part inside the quotation marks needs to refer to the image you want to work with and where you have it located:

<IMG SRC="../images/picturename.gif"> We can also make a single image link to a number of different pages. These are called "Imagemaps". Any image can be broken up into an imagemap. An Imagemap is an image on a web page that leads to two or more different links, depending on which part of the image someone clicks To make an image map, you first need an image. This image must contain all the relevant graphical information to make an optimised link.

Decide which regions in the image will become hyperlinks or will show your text popping up. Then, you need to know the numerical pixel coordinates of each region.Various graphic packages have ways for doing this. For example: In Paint Shop Pro: the coordinates are displayed in the status bar. In Adobe Photo Shop: use the ruler to identify the x,y coordinates. A region can be defined using a circle, square or polygons. Note all the coordinates you will need: * For a rectangle: the top-left and bottom-right coordinates are needed; * For a circle: its centre point and radius; * For a polygon: all the coordinates of each corner. Once the coordinates are noted, insert the following tag: <MAP NAME="worldpictures"> </MAP> This tag names the image being used as an image map, in this case worldpictures, but it would be whatever you want to call it. The next tag, the <AREA> tag, is placed inside the <MAP> and </MAP> tags: This tag will help isolate the sections being defined as hyperlinks. Use as many as necessary and be careful when you insert the coordinates.Inside the <AREA> tag we need to define a few things: SHAPE defines the shape of the region: Rectangle - SHAPE="rect" Circle - SHAPE="circle" Irregular - SHAPE="poly" COORDS defines the exact coordinates of the region: For rectangles - the x,y coordinates of the top-left corner and the x,y coordinates of the bottom-right corner. For circles - the x,y coordinates of the centre of the circle and the radius in pixel values. For polygons - list the x,y coordinates of each of the points in order. And the HREF - to identify the destination of the link. You need to place the actual image on the page: Use the <IMG> tag to do so, but include the attribute USEMAP="#name" <IMG SRC="picture.gif USEMAP="#picture" BORDER=0> In the <MAP> tag you will the have:

<MAP NAME="picture">

A final example may look something like this:

<MAP NAME="worldmap">

<AREA SHAPE="rect" COORDS="2,2,272,153" HREF="page.html">

<AREA SHAPE="circle" COORDS="428,50,49" HREF="pageA.html">

<AREA SHAPE="poly" COORDS="418,368,472,368,482,235,476,232,

478,211,463,207,441,211,441,229,435,232" HREF="pageB.html">

</MAP>

<IMG SRC="imagemap.gif" USEMAP="#worldmap" border=0>

Now a lot of that may not make much sense, and won't really work unless you have images that you particularly want to work with and can adjust the code to suit, but it gives you somewhere to start. With a bit of further research, experimentation and practice it is possible to learn how to use image maps properly.