Image Maps

An image map is basically a large image that has multiple hotlinks within it. Server-side image maps, in which all the action occurs on the server, are beyond the scope of this class since we can't control what the server will do and whether or not it will support an image map. Instead, we'll briefly review client-side image maps, which rely on a few additional lines in your HTML to give the browser additional instructions.

Here's a sample of what an image map and the code that makes it work would look like.

<p>
<img src="imagemap01.gif" width="149" height="97" border="0" usemap="#imagemap01" alt="" / >
<map name="imagemap01">
<area shape="poly" coords="75,10,74,24,80,27,80,42,87,46,89,54,95,57,100,57,100,53,142,54,142,10,76,10,76,10" href="montana.html">
<area shape="poly" coords="66,8,74,11,73,23,79,28,80,46,86,45,91,58,98,57,99,77,66,78,64,8" href="idaho.html">
<area shape="poly" coords="18,36,34,46,66,42,65,76,10,76,16,56,18,36,19,35" href="oregon.html">
<area shape="poly" coords="14,18,18,37,30,40,33,45,67,41,66,9,22,9,15,17,20,33" href="washington.html">
<area shape="rect" coords="99,53,143,91" href="wyoming.html">
<area shape="default" nohref>
</map>
</p>

 

Creating image maps

Hand-coding an image map is, thankfully, seldom necessary. Most Web-editing tools, whether they're WYSIWYG ones like Dreamweaver and non-WYSIWYG ones like HomeSite or the freeware FirstPage, have built-in image map tools. So do many image editing tools, such as GIMP and Photoshop. There are also many stand-alone freeware image map creation tools for most platforms, including:

Windows, Toma Image Mapper, http://www.tomaweb.com/freeware.asp

Macintosh, IMM (Image Map Maker), http://mac-sea.tucows.webusenet.com/preview/206187.html

Linux, KImageMapEditor, http://kimagemapeditor.sourceforge.net/

Using a tool like these makes creation of image map as simple as outlining an area with the mouse, then typing in the destination URL.

Use the mouse to outline an area you want to hotlink.

Type in the destination URL you want linked to this area.

The program will generate the HTML code.

More information

Web Monkey: Image maps
http://hotwired.lycos.com/webmonkey/reference/unix_guide/

On your own

If you'd like to practice, try to create an image map. You may use the image above if you like, or you may use one of your own. If you encounter any problems or have any questions, start a forum topic in the bulletins/discussions area of the course Website. Be sure to include the URL of your image map so we can see it, especially if you're asking for help.

Image editing

Just a reminder: modern image-editing programs, such as Adobe Photoshop, can do considerably more than we need for this class. For beginning HMTL publishing, such as we do in here, an image editing program can, at a minimum, help you crop and resize images, and help you optimize them so they'll work best on the Web. You can also, with just a bit of knowledge, touch up and otherwise improve some basic photographs.

In the classroom, sometime this quarter, we'll save the attached fog.tif file onto our computers, turn it from a foggy day into a sunny one, resize the photo to a reasonable size for a Web page, and then export the file as a Web-friendly graphic.

We also take a crack at some photo editing at the end of module six, in the optional photo exercises. If you skipped over that at the time, now might be a good time to give it a try.