How to use Image Maps

Web Management
Webeditors (in General) WebEditors (in general)

Product Producer : Webeditors (in General) / Internet : http://html.pagina.nl/

Article C5P65A3048 / Language ENG

In this article…

Begin of this article…

The classic way of navigating around the Web is to click links in text, or images that are links. But sometimes it's essential, or fun, to have clickable hotspots in an image, so that clicking different parts of a single image takes the user to different places. This fantastic technology, which has been turning heads ever since it hit the streets circa 1995, is called "image mapping." Here's the breakdown.

You all know how to make a link out of an image:

When people click on that photo of a happy koala, they are whisked to your page about koala fun.

Now suppose, though, that you have a picture of a koala and a wombat, and you want to map the image so users who click on the koala are taken to the Koala Fun page, yes, but users who click on the wombat -- who either already know all about koala fun or are for some reason indifferent to it -- go to a Wombat Fun page. It'd be easy enough to split the image into two different image files, place them next to each other on the page, and link each separately, but in our case unfortunately the two are obviously very good friends -- the koala is vigorously hugging the wombat, the wombat's whiskers are obscuring the koala's left eye -- and it's pretty much impossible to split the image into two.

Image mapping to the rescue! To create our image map, we first need to open the image in an image editing program and figure out how the areas to be mapped are delineated in terms of pixels. (This is the hardest part, so let's get it out of the way first.) We're going to count pixels, starting in the upper left-hand corner of our image and proceeding to the lower left. "X" refers to the horizontal direction and "Y" refers to the vertical. Any pixel in our image can be described by using two numbers: its X coordinate and its Y coordinate. Thus, the pixel that's 36 pixels to the left and 75 pixels down from the top can be called "36,75" for short.

Now, pay attention. Using a simple set of rules, we can delineate shapes by mentioning their pixels. To describe a rectangular area of our image (that paw looks kind of rectangular, eh?), for example, we need merely indicate the X and Y values of its upper-left corner and its lower-right corner, separated by commas, thusly: "36,75,140,150" indicates the rectangle -- deep breath -- whose upper-left corner lies 36 pixels from the left and 75 pixels from the top, and whose lower-right corner lies 140 pixels from the left and 150 pixels from the top. Can you dig it?

The way this is indicated in HTML is: <AREA SHAPE="rect"HREF="koala_fun.html" COORDS="36,75,140,150">. Notice that we've stuck in the target of the clickable hotspot we've delineated in there too.

But we're not limited to rectangles, oh no. An oval can be described just the same way as a rectangle -- the oval is the largest one that can fit inside the rectangle whose corners we

describe, its curves just touching the sides of the rectangle. (Imagine, if it helps, superimposing a bar of oval-shaped Dove soap on top of a rectangular bar of Ivory soap.) All that differs is the SHAPE attribute:

We describe a circle by indicating the X and Y of its center point

and then giving the length of the radius in pixels:

What else? Well, for detail work, sometimes you need to bring out the big guns and completely outline an irregular shape. That's done by simply listing the coordinate pairs of each subsequent point. The points you mention are connect-the-dotsed automatically, in a clockwise order, with the last point mentioned being connected back to the first. The SHAPE attribute is "poly", short for polygon. The tag looks like this:

Lastly, if you want to make a single pixel into a link, it can be done with the SHAPE="point" attribute:

To build the actual map, we want to assemble a bunch of AREA lines like the above (at least two of them), each one describing a single hot-linked area of our image. These lines are placed within MAP tags:

</MAP>

This entire block of code can be placed anywhere in your HTML document. Somewhere in the HEAD is nice, or near the image to be mapped. Doesn't matter. You'll specify where to find it by

mentioning its name when the time comes.

So you have your image tag:

You need to add two attributes to this: "USEMAP" and "ISMAP". ISMAP tells the browser that, well, it is an image map. And USEMAP specifies where to find the pixel map info you just laboriously entered. Remember to prefix the name of the map data with a # sign -- this is because it's an anchor within the same file:

End of this article…

http://members.fortunecity.com/digispy/

With special thanks to the writer and/or publisher of this article.

How to use Image Maps

Web Management Webeditors (in General) WebEditors (in general)

In this article…

Web Management
Webeditors (in General) WebEditors (in general)