Web Graphics - Client-Side Image Maps
HTML Image Maps ...
A full tutorial, howto and demonstrations on creating HTML, client-side image maps. It includes the 'Cheatin Dawg Demo' plus a full discussion on the associated 'shape' tag and the different shape attributes that are available when creating client-side image maps using a bit image.
What Are Image Maps?
One of the least understood functions of HTML (Hyper-text Markup Language) is the image map and many people who produce web pages often start to look a bit disturbed at the mention of image maps. I suspect the reason for this is that image maps have never been properly explained to them. And yet they are simple but you must pay attention to the detail and they can be time consuming.
If you study our map of Treasure Island you will see that it has ten red squares and each one of these red squares has been defined as a hotspot in the corresponding HTML 'treasure' image map. Try clicking on each of the red squares and an Alert box will pop-up and tell you where on the treasure map the hotspot is located.
You should note that the red squares have no signifigance and their only purpose is to tell you where the hotspots are on this particular map image. You could have the image map and hotspots without the red squares being displayed on the image and this would would just make it a bit harder to find the hotspots. To demonstrate this we have included an extra hotspot that is not marked with a red square. See if you can find this hidden hotspot and find out where the 'Bulk Of Treasure Here' is located (Hint: The mouse cursor changes whenever you move over or off a hotspot).
Cheatin Dawg Demo
Let's move straight on another demonstration and we have prepared one called the 'Cheatin Dawg Demo'. In the demo a cartoon dog asks you to select a card by clicking on it, and he will then tell you which card you selected. I do hope you have noted that he is deliberately looking away so as not to cheat.
cheatin dawg image map ...
Now we all know that really, the dog isn't clever enough to tell which card you selected, without first sneaking a look to see which card the xy position of the mouse cursor is over, but I am sure that you get the idea. You might also try clicking on the dog and then on any other area of the image where there is no card (the default area).
How's It Done?
We created the image in Corel Photo Paint having found the cartoon dog in an archive and obtaining the playing cards from a screen capture of a Microsoft Windows card game. However, for this exercise we are going to presume that the image had previously been created.
When creating an image map you need to get certain advance information about the image and this includes the size of the image and all the x,y coordinates of the various shapes that you want to define in your image map.
One method of getting this information is to load the image into one of the commercial image processing programs and these include Corel Photo Paint, Paint Shop Pro and Adobe Photo Shop. An altogether better way could be to load your image into our Wizard QuikMap utility which is located on the third page of this image map tutorial. This utility will accurately provide you with all the x,y coordinates you require and there is a demo shapes image and accompanying script which provides an immediate tutorial and reference to the various shapes that you can define.
The initial information we need to determine about our cheatin dawg demo image is it's size, which is 312 pixels wide by 81 pixels high. When describing the position of a pixel in an image we use the term x,y coordinates. The x-coordinate is the horizintal coordinate (that is the number of pixels from the left), and the y-coordinate is the vertical coordinate (that is the number of pixels from the top).
If we were describing the x,y coordinate of the top left hand pixel in our image it would be 0,0 and if we were describing the x,y coordinates of the bottom right hand pixel in our image it would be 311,80 (remember, the pixel count starts at 0, not 1). We could describe the approximate dead center of the image as x,y coordinates 156,40.
We also need to get the x,y coordinates of each of the points that make up the shapes that define the hotspots we want on our image. Again, these coordinates can normally be found using an image processing program or Gil's QuikMap utility.
The Map Script
Having learnt how to find the coordinates for our image map we can now move on to creating the actual script for it. We would suggest that you place the HTML script at the bottom of your document, before the </BODY> tag.
cheatin dawg image map script ...
The Image Tag
Now there is only one thing left to do. Presuming that you have previously displayed the graphic on your Web page, you would have to use some scripting similar to the following.
cheatin dawg ordinary image script ...
A simple addition to ths tag will tie the graphic to the image map. You do this by adding the 'usemap' attribute to the image tag in the following manner.
cheatin dawg usemap image script ...
There you have it but for one cautionery tale. When I first started creating image maps they would not work, and I used to sit there for ages trying to figure it out. Do you see that hash sign ('#') in the usemap attribute value of the image tag, the one in front of "cheatinDawg"?
I used to leave it out and the image maps would not work. The hash sign indicates that the image map script is located on the same web page as the map image and not somewhere in outer Mongolia. Please try not to be as daft as me, I did it several times.
The Shape Attribute
We will now talk in more depth about the 'shape attribute' and the corresponding 'coords attribute'. These are used in the <area> tags of an image map. There are a total of four values that can be used with the shape attribute.
- rect (rectangle) requires left/top and right/bottom x,y coordinates
- circle (circle) requires a center x,y coordinate and a radius in pixels
- poly (polygon) requires a minimum of four x,y coordinates
- default (default) requires top/left and bottom/right x,y coordinates
demo shapes image map ...
demo shapes image map script ...
Some Final Points
There are certain points that we would like to explain in greater detail about items mentioned in the preceding section.
The shape attribute value rect can be expanded to rectangle in Microsoft browsers but only rect is recognised in Netscape browsers. Our recommendation is to always use rect.
The shape attribute value poly can be expanded to polygon. As far as we can see this is a matter of personal taste but we always use poly.
There is another shape attribute value called point which we have deliberately omitted. It is a totally useless shape and does not appear to be included the HTML 3.2 or HTML 4.0 specifications. It doesn't appear to work properly on modern browsers and it can be simulated using the rectangle shape. To omit it is a kindness.
We have included coordinates with the default shape attribute. If you are going to include the default shape in your image map then we recommend that you always set these to the top/left x,y coordinates of your image and the bottom/right x,y coordinates of your image. This will ensure that your image maps will operate in the same manner in both Netscape and Microsoft browsers.
Netscape family browsers will ignore any coordinates you include with the default shape and automatically use the total image area as the default area. Microsoft browsers on the other hand, will ignore the default shape area tag if you do not include coordinates. You can in fact define any rectangle on the image as the default area in Microsoft browsers.
We make the point that we value cross-browser compatibility for our scripts, far more highly than the dubious ability to define a lesser than full image area as the default area on an image map in Microsoft browsers alone.
Link Directly To This Page ...
help support free information on the Internet ...
Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.
the link displayed ...
select/copy the link Markup ...