Okay - this is possibly the coolest thing you can do on a web page: create a picture that people can click on to navigate your website - and it is so easy to do!!
But wait, Mike...isn't that what using images as links is for? Umm...well...yeah.... but this is way more cool: when you use an image as a link, the whole image is the link and you can only go to one other place - but an image map can make different parts of the image link to different places!
There are two types of image maps: server side, which require a LOT of extra cr...I mean stuff...to work, and client side, which are built in as part of the HTML for the page that the image map appears on. We will be discussing clien side image maps.
Needless to say, to begin creating an image map you will need an image. I'm going to use this map I created for my virtual tour of the U.S. Naval Academy to demonstrate:
Let's say I want to make Alumni Hall (number 5) clickable, so that when a visitor clicks on that area of the map they will be magically transported to the page that shows a picture of Alumni Hall. To start the definition of the map I need three things:
The first two are pretty easy - you just create them in a word processor such as WordPad. The tricky part is getting the coordinates of the image where you want the "hot spot" - the clickable area - to be. There are two ways to do this: either use a graphic editor, such as Paint Shop Pro or Photoshop, which display the coordinates as you are editing an image (PSP shows them in the lower right-hand corner) - or you can create a mockup page that has nothing on it but your image and bring it up in your browser. I prefer the latter method because it perfectly duplicates the way your imagemap will behave when it goes "live". To creatre the mockup page, code the following in the BODY portion of a new HTML document (I have used the name of the map I show above; just replace this with the name of the image you want to use):
<A HREF=""><IMG SRC="navytour/usna_map.gif" ISMAP></A>By doing this, you've created the imagemap - it just isn't clickable yet - well, technically... I've done this with the map, above, to demonstrate. Move your cursor over the map; you should notice two things:
What are you talking about!?
Oh, sorry - I forgot to mention that it's the coordinates that turn an image into an image map.
For this example, the "hot spot" is a rectangle, so the coordinates refer to the upper left-hand corner and the lower right-hand corner
of the clickable area. Go ahead and try it: move your cursor to the upper left-hand corner
of number 5 on the map, then point to the lower right-hand corner, and look at the status bar of the browser. Pretty cool, huh?
In a set of coordinates, the first number refers to the horizontal offset - that is, the distance, in pixels, from the left-hand edge of the image - and the second number refers to the vertical offset - the distance, in pixels, from the top of the image. In nerdspeak, this is known as the (x,y) coordinate. As we explore image maps, bear in mind that every point along the edge of the clickable area will have an (x,y) coordinate, and the coordinates are listed in clockwise order. Keep in mind that, if the area is a rectangle or square, only the upper left-hand and lower right-hand corners need to be defined.
So what do we do with this new wealth of information? We draw a map!
The following code is necessary to define the map to the browser:
<MAP NAME="usna_map"> <AREA SHAPE=RECT HREF="navy_page3.html#alumni" COORDS="105,144 130,162>> </MAP>
Then you have to tell the browser that the image is supposed to use the map definition you just created. Remember this code?
<A HREF=""><IMG SRC="navytour/usna_map.gif" ISMAP></A>Well, it gets inserted into your "real" page now...but it gets modified as shown here:
<A HREF=""><IMG SRC="navytour/usna_map.gif" USEMAP="#usna_map"></A>where the value coded in the USEMAP= parameter is the name of the map you created a moment ago. It took a few minutes to get here, but the map below is the result of the exercise we just went through. Move your mouse over the map and notice that the only area where the cursor turns into a hand is when it's over Alumni Hall. Go ahead - click on it...it works - BUT COME BACK; we're not done yet!!! :-)
how could this have happened?
creating oddly-shaped Image Maps
Back to Navpooh's Home Port
Back to HTML tutorial index