HTML image maps - an old trick with a new twist

HTML image maps have been around for some time but not many people are familiar with them. In fact, until a client recently wanted to use an image as the basis of a dynamic help system, even I didn't have much use for them. But when you do need to work with them, it's actually a lot of fun!

So what's the twist? This article shows how one can use image maps without the anchor tag which is normally used, uses a little jQuery, and is written in the context of Apex - all at the same time. You can check out the demo here. Here are the basic steps to get you going...

1. Install jQuery.
2. Get the image. There are a bunch of programs out there, both free and paid, that will help you take screen shots if you don't already have the image you want to work with. For a free tool that comes with Vista, check out the snipping tool.
3. Create a map for the areas in the image. In an HTML image map, the sections one will be working with are called areas and each area element has a shape attribute. There are three basic shapes: rect (rectangle), circle, and polygon. Choose the appropriate shape for each each area of the image you want to work with - polygons can be used for oddly shaped areas. Then using a tool for working with images, like MS Paint or GIMP, get the coordinates of each. Each shape has its own system for mapping coordinates. We'll turn these coordinates into code in step 5.
4. Make the image available to your application. Either add the image to the shared components of your application or to the file system of your web server like the "i" directory.
5. Add the image and image map to your Apex application by adding an HTML region with the following code (modify for your needs):

   
   
   
    
   
      The go button fires off the Ajax process to run your report. 
      While the report loads an image is displayed that lets the 
      user know the system is working...
   

6. Add the following JavaScript to the HTML Header of the page:

As you can see, my implementation is very basic - all the HTML is in the one region. However, there is no limit to how you can adapt the code for your own needs. Using a static region ID, you can work with multiple regions. Even Ajax is possible.

Happing coding!

 

• 2009/05/12 - Updated to better handle the hovering effect in IE.