Fig1.
Normal Image
What's on this page anyway?
Well, first of all, I give a brief explanation of how to put a graphic into a web a page. I'll try to keep it short and sweet. Then I'll go on and try to explain in some detail, just what an image map is, how it works, and maybe show an example or two. For those of you bored, I'll show you a couple of tricks I've picked up along the way using JavaScript and images, a couple more examples, and very few explanations. Just the code. Finally, I have a few links that might be helpful or interesting. Hope you enjoy!
| 1) Normal Images | 3) Client-Side Image Maps | 5) Image Maps and JavaScript |
| 2) Images and Links | 4) Images and JavaScript | 6) Complete Example |
I guess I should start at the beginning. The first step is to draw, scan, buy, or steal the image you intend to use on your page, and then convert it into GIF or JPG format. I'm not going to try and explain graphic formats here. Visit your local search engine for that. Once you have the image in a suitable format for the web, you are ready to put it into your web page using the image <IMG> tag. Of course, if you snatched an image off the web, it's already in the proper format. For an example of a plain old graphic in a web page, check out my original image below:
|
Fig1. Normal Image |
I made the image, but robbed the look and idea for a control strip from Apple Macintosh. This image is an example of a normal image in a web page using the image <IMG> tag. This is one of the first things people want to learn to do when they create a web page. So, for all you beginning users looking at this page, here is the HTML for my image:
<img src="cstripup.jpg" border="0" height="26" width="123" units="pixels">
To help refresh everyone's memory, I will now try to briefly explain the image <IMG> tag, it's attributes, and their values:
<IMG>
To stop text from flowing next to the image when using the align attribute with a value of "left" or "right", use the <br> tag along with the clear="all" attribute/value pair. For example:
<br clear="all">
If you place the image <IMG> tag inside the link <A> tag, the image becomes the hotspot for the link. When you click on the image, you will go to the link at the other end. Here is my image again, this time being used as a hotspot to a link:
|
Fig2. Image as Link |
Notice how the status bar changes to the value of the link when you pass the mouse pointer over the image. Did you click the image to load the link? Try it. The HTML for my image, when used as a link, is as follows:
<a href="link.html">
<img src="cstripup.jpg" border="0" height="26" width="123" units="pixels">
</a>
The border="0" attribute/value pair of the image <IMG> tag will hide the border from viewers. If you want to ensure that your viewers will see the link, you might want to set the value to something greater than zero. This will cause the border to use the values set in the body <BODY> tag for link, active link, and visited link, including the defaults if not set. Just something to keep in mind.
Well, that's supercool and all, but I want to click on a region of my graphic and have it follow seperate links. For example, my image contains a color palette, a speaker, a clock/calendar, and a buckle. I would like to be able to click the color palette and load a page, click the speaker and load a different page, click the clock/calendar and load a third page, and click the buckle to load a fourth page. For instance, the clock/calendar region could load a page with the date and time on it. And the speaker might load a page with different musical selections. And the color palette could load a page with different background schemes. And finally, the buckle could load an "About Control Strip" information screen. This is different than the example in Fig2 above, because each region has to point to a different link, instead of just one link. This is done by mapping the regions of the image using, what else, map area coordinates. Images that map different regions to different links are called image maps. Here is my graphic as an image map:
|
Fig3. Image Map |
Here is what the <IMG> tag looks like when my image is used as an image map:
<img src="cstripup.jpg" border="0" height="26" width="123" units="pixels" usemap="#StripUp">
Notice that this is just a normal image <IMG> tag with the addition of the usemap property. As I stated eariler, image maps use area coordinates to map the regions of the image. These coordinates are used in the area <AREA> tag within the map <MAP> tag. The HTML for the map looks like this:
<map name="#StripUp">
<area shape="rect" coords="8,0 38,23" href="color.html">
<area shape="rect" coords="38,0 68,23" href="sound.html">
<area shape="rect" coords="68,0 98,23" href="calendar.html">
<area shape="poly" coords="107,0 115,0 123,8 123,18 115,26 107,26 107,0" href="about.html">
<area shape="default" nohref>
</map>
The map is used in a similiar manner to the anchor property of the link <A> tag. I usually just follow the image with the map, but you can place the map anywhere in the page you wish. Purely a matter of preference. The map can actually be a seperate file, just reference it as such. The completed HTML, image <IMG> tag and corresponding map <MAP> tag, looks like this:
<img src="cstripup.jpg" border="0" height="26" width="123" units="pixels" usemap="#StripUp">
<map name="#StripUp">
<area shape="rect" coords="8,0 38,23" href="color.html">
<area shape="rect" coords="38,0 68,23" href="sound.html">
<area shape="rect" coords="68,0 98,23" href="calendar.html">
<area shape="poly" coords="107,0 115,0 123,8 123,18 115,26 107,26 107,0" href="about.html">
<area shape="default" nohref>
</map>
Notice the way the map file lists the coordinates and link for each area of the image. The <MAP> tag is basically a description of the different regions within a graphic, and the links they point to. The hardest part of making an image map is trying to determine the coordinates of each clickable region.
Each region can be one of four shapes: rectangles, circles, polygons, and default. The rectangular region uses "rect" as the object of the shape attribute, and the starting point for the coordinates is the top left, and the ending point is the bottom right. For circles, the object used in the shape attribute is "circle", and the coordinates start at the center point of the circle and extend to the radius, in pixels. The polygon uses "poly", and starts at one point, extends to another arbitary point, to the next point, and so on, until the first point is reached again. Just like connecting the dots. The "default" region is all the rest of the image that has no map coordinates associated with it. It can also point to a link, or do nothing when used with nohref in the area <AREA> tag. Now take another look at the code for the map above, and then pass the mouse over the image and watch the status bar for a better understanding.
Say what!? How the heck do I map all those coordinates? Sounds complicated! Well, it seems that way, but really it is quite easy. If you draw the picture yourself, getting the ponts is easy. If you obtained the graphic in another manner, than you can load it in some graphics program and get the coordinates that way, or you can approximate if need be, but the easiest way I've found thus far is a program called Mapedit. You just load the image in Mapedit, select the kind of shape, and literally draw them on the image. They can then be moved and adjusted, the links can be tested, etc. Then it will write the coordinates for you! Good deal. Takes all the hard work out of mapping the image yourself. There are several other image map programs available, but I prefer Mapedit.
For more information about the latest and greatest version of Mapedit:
http://www.boutell.com/mapedit/
Ok, that's image maps in a nut shell. You are now armed with the necessary tools to go make one of your own. Now, here are some tricks for those of you that have been bored with my presentation. The first trick up my sleeve is image replacement. Run your mouse over the image below and watch the results.
 Fig4. Image Replace 1 |
This trick is accomplished using JavaScript event handlers, specifically, onMouseOver and onMouseOut. The idea is to preload the images to allow quick loads/unloads of the image from cache. The image has been named so it can be referenced by JavaScript and serves as the hotspot for a single link. Here is the piece of code that does the image replacement:
<script language="JavaScript">
<!-- Begin //
// Preload images into cache. //
stripdn = new Image(123, 26);
stripdn.src = "cstripdn.jpg";
stripup = new Image(123, 26);
stripup.src = "cstripup.jpg";
// End -->
</script>
<a href="link.html"
onMouseOver="document.FIG4.src = stripup.src;"
onMouseOut="document.FIG4.src = stripdn.src;">
<img src="cstripdn.jpg" name="FIG4" border="0" height="26" width="123" units="pixels">
</a>
Pretty cool trick, right? A couple of things to keep in mind is that there is only one link to follow when clicking on the image, and the two images MUST be the same size, and the name attribute MUST be used. If you do use different sized images, the replacement image will resize to fit the size of the original, named, image. In addition, if you use a transparent background, some systems (Macintosh) will allow the original image to bleed through the replacement image, and visa-versa. Below are the two images with the borders set to show you how I sized my images, which are NOT transparent.
|
Fig4a. Image Replace Down |
Fig4b. Image Replace Up |
The link <A> tag needs to be used since the event handlers are not objects of the <IMG> tag. If you don't want to link anywhere, you can use the anchor attribute of the link <A> tag as a workaround. For example:
<a name="monster"></a>
<a href="#monster"
onMouseOver="document.FIG4.src = stripup.src;"
onMouseOut="document.FIG4.src = stripdn.src;">
<img src="cstripdn.jpg" name="FIG4" border="0" height="26" width="123" units="pixels">
</a>
Got any clue as to what I'm going to do next? You got it! Add the Usemap attribute so I can use my map. When the viewer passes the mouse over the buckle, the strip comes out, and then the viewer can click his link of choice. If the viewer decides to move the mouse off the hotspot, the strip is closed again. Cool. There is a problem though, there are two images, and only one map. The first map referenced is used, and all other references to a map are ignored or generate an error. Yuck! So, in this example, I only need one map because of the mouse events. There is only one active image displayed to the viewer. No problem. But in the next section and example, this becomes an issue.
|
Fig5. Image Map Replace |
OK, here a couple of things you can do with image maps. You can specify a target window or frame with the target attribute of the area <AREA> tag. You can use onMouseOver and onMouseOut event handlers with image maps. Notice how I have to modify my map. The nohref needed to be replaced with a URL reference to keep the strip from slamming shut when the mouse crosses the "default" region of the image. I reference the "About Control Strip" link in my example. My script, image, and map serve as examples:
<script language="JavaScript">
<!-- Begin //
// Preload images into cache. //
stripdn = new Image(123, 26);
stripdn.src = "cstripdn.jpg";
stripup = new Image(123, 26);
stripup.src = "cstripup.jpg";
// End -->
</script>
<a href="#monster">
<img src="cstripdn.jpg" name="FIG5" border="0" height="26" width="123" units="pixels" usemap="#StripUp2">
</a>
<map name="#StripUp2">
<area shape="rect" coords="8,0 38,23" href="color.html"
onMouseOver="document.FIG5.src = stripup.src;"
onMouseOut="document.FIG5.src = stripdn.src;">
<area shape="rect" coords="38,0 68,23" href="sound.html"
onMouseOver="document.FIG5.src = stripup.src;"
onMouseOut="document.FIG5.src = stripdn.src;">
<area shape="rect" coords="68,0 98,23" href="calendar.html"
onMouseOver="document.FIG5.src = stripup.src;"
onMouseOut="document.FIG5.src = stripdn.src;">
<area shape="poly" coords="107,0 115,0 123,8 123,18 115,26 107,26 107,0" href="about.html"
onMouseOver="document.FIG5.src = stripup.src;"
onMouseOut="document.FIG5.src = stripdn.src;">
<area shape="default" href="about.html"
onMouseOver="document.FIG5.src = stripup.src;"
onMouseOut="document.FIG5.src = stripdn.src;">
</map>
Well, it's looking pretty good now. But I'm still not satisfied! I want my strip to truely mimic Apple's. I'll probably get sued ... sigh! Anyway, you can also specify a JavaScript function as the source of the link. This creates another problem, the JavaScript function shows in the status bar and has to be masked with the mouse event handlers. So, with a little modification of the original idea, some fancy mapping, heavy use of mouse event handlers, and the addition of a few JavaScript functions, I can accomplish the next trick. Click the buckle to open and close the strip, click in the default area of the image for the info screen, and click elsewhere for the links. Try it:
|
Fig6. Completed Example |
There are a couple of things to note. Both images need to align with the map. I boo-boo-ed when I made this image. Half the "color palette" region is cut off by a default region of the image. Plan ahead when making your graphics! Also, there is some heavy use of mouse events here. Take a look at this page's source code if you don't believe me! Speaking of code, here's the HTML and JavaScript for Fig6:
<script language="JavaScript">
<!-- Begin //
// Preload images into cache. //
stripdn = new Image(123, 26);
stripdn.src = "cstripdn.jpg";
stripup = new Image(123, 26);
stripup.src = "cstripup.jpg";
ctrlStripState = "Dn";
function ctrlStrip(ctrlStripState) {
if (ctrlStripState == 'Dn') {
document.FIG6.src = stripdn.src;
}
if (ctrlStripState == 'Up') {
document.FIG6.src = stripup.src;
}
}
function ctrlStripMsgOpen() {
if (document.FIG6.src == stripdn.src) {
window.status = "Open Control Strip";
}
else {
window.status = "Document: Done";
}
}
function ctrlStripMsgClose() {
if (document.FIG6.src == stripup.src) {
window.status = "Close Control Strip";
}
else {
window.status = "Document: Done";
}
}
function ctrlStripMsgColor() {
if (document.FIG6.src == stripdn.src) {
window.status = "Document: Done";
}
else {
window.status = "color.html";
}
}
function ctrlStripMsgSound() {
if (document.FIG6.src == stripdn.src) {
window.status = "Document: Done";
}
else {
window.status = "sound.html";
}
}
function ctrlStripMsgCalendar() {
if (document.FIG6.src == stripdn.src) {
window.status = "Document: Done";
}
else {
window.status = "datetime.html";
}
}
// End -->
</script>
<a href="#monster">
<img src="cstripdn.jpg" name="FIG6" border="0" height="26" width="123" units="pixels" usemap="#StripUp3">
</a>
<map name="#StripUp3">
<area shape="poly" coords="0,0 8,0 16,8 16,18 8,26 0,26 0,0" href="javascript: ctrlStrip('Up');"
onMouseOver="ctrlStripMsgOpen(); return true;"
onMouseOut="window.status='Document: Done'; return true;">
<area shape="rect" coords="8,0 38,23" href="color.html"
onMouseOver="ctrlStripMsgColor(); return true;"
onMouseOut="window.status='Document: Done'; return true;">
<area shape="rect" coords="38,0 68,23" href="sound.html"
onMouseOver="ctrlStripMsgSound(); return true;"
onMouseOut="window.status='Document: Done'; return true;">
<area shape="rect" coords="68,0 98,23" href="datetime.html"
onMouseOver="ctrlStripMsgCalendar(); return true;"
onMouseOut="window.status='Document: Done'; return true;">
<area shape="poly" coords="107,0 115,0 123,8 123,18 115,26 107,26 107,0" href="javascript: ctrlStrip('Dn');"
onMouseOver="ctrlStripMsgClose(); return true;"
onMouseOut="window.status='Document: Done'; return true;">
<area shape="default" href="about.html"
onMouseOver="window.status='Document: Done'; return true;"
onMouseOut="window.status='Document: Done'; return true;">
</map>
The addition of all the message functions was to hide the status bar when the strip is closed. You can still click in the region and follow the link, even with the image down.
This concludes my image map page. Feel free to steal my code, image, and ideas. If you do something similiar, send some e-mail and let me check it out.
This page created on April 23, 1997.
http://www.engr.iupui.edu/~d00willi/index.html