Use Image Maps to Add Link Hot Spots in Your Graphics

Tired of boring text links? Need to save space in your sidebar? Then consider an attractive image with more than one hyperlink spot. You've seen corporate sites with maps where you pick a city or state for local information. Another example is a painting of prominent 18th century figures seated around a table. Click each face to see that person's wiki-page pop up.

In this tutorial you'll learn how to map hot spots onto images for WordPress.org or Blogger blogs. Doing this can spice up your design and beef up your blog's navigation. Remember, "a picture is often worth a thousand words"!

Roll your mouse over the admittedly action-packed graphic below to see the clickable regions. Imagine someone arriving on BWS to learn how to do something with 125 x 125 ads, display a new grab button or manipulate an image. The clickable graphic lets them find the question they want answered or spot the scroll box they're looking to create. The alternative is doing a search and reading several posts in the results list, hunting in the Archives or just leaving empty-handed.

(before hot spots)

A Sample for the Tutorial

The sample on the right is a bit more manageable for most uses. It would grab your reader's attention and allow them to click on one of three links. The browser then opens the page with the appropriate article or categories list.

Step 1: Design the Graphic

There are many packages that let you create photo/text images like the sample above. Of course, you can use PhotoShop (quite expensive) or the free software at Gimp.org. GIMP is a "feature-rich" open source program that lets you compose and manipulate images.

I used the software that came with my MS FrontPage years ago. It still works. You can download it free at MS Image Composer.

1. Determine the width and height of your image. This ensures that it will fit in your sidebar without resizing. Once the hotspots are created, you cannot resize the graphic. Hot spots work off coordinates within the image.
2. I used the shapes button (6th on the bottom ) to create two circles of the same size. Set the color using the first color swatch button, then create one circle in turquoise. Set the color to black for the second circle.
3. Overlap the two circles with the black, creating a shadow effect. Use the "Arrange" button on the menu to move the turquoise circle to the top.
   
4. Create text using the 5th button from the bottom of the tool bar. The color swatch in the pop-up window lets you change the text color to blue, red or black for this example. To make the blue text resemble a wave, press Tools, Effects and scroll over to Wave. Click the "details" tab to change the wave frequency, amplitude (I used 50%) and axis (used Y only).
5. Position the three text images within the overlapping circles and save on your computer as a jpg image.

Step 2: Add Hot Spots to Graphic

For this step you need advanced software to define the position of the links and create the html needed within your blog. You can use:

• MS FrontPage
• DreamWeaver
• Photoshop (see this article for details )
• GIMP (has a plugin for image maps)

If necessary, call in a favor from one of your friends who may have the software. Actually, it takes very little time to do what's needed and copy the html code. I used FrontPage. Before you start, be sure to have the urls for the three links handy. (Open them in windows so you can copy the links as needed.)

1. Open a new page. Use toolbar to Insert, Picture from file (the graphic you saved on your computer from Step 1).
2. Right click the image to select the "pictures toolbar" - these are the buttons to draw hot spots: The rectangle, circle and polygonal (free form).
3. Select the image, press the third button for the polygonal tool. A pencil lets you draw sloping lines around the words "Create Your Blog." Release the drawing, and a window pops up to let you insert the hyperlink. Copy and paste the correct blog page's url . In our case, it's the contents category.
   
   Do the same for "Grow Your Blog and "Customize It". Use the first button, rectangle to map the hot spots and paste hyperling addresses.
4. Click "show code" at the bottom of the FrontPage window. Copy all the html that defines the paragraph with the coordinates map. In our example it looks like this:

   <p><map name="FPMap0">
   <area href="http://bloggingwithsuccess.net/category/promotion-traffic-branding" shape="rect" coords="47, 73, 170, 93">
   <area href="http://bloggingwithsuccess.net/category/design" shape="rect" coords="26, 97, 122, 114">
   <area href="http://bloggingwithsuccess.net/category/content" shape="polygon" coords="8, 40, 62, 47, 136, 25, 169, 45, 165, 64, 8, 64">
   </map>
   <img border="0" src="../Desktop/Clickable%20regions/sample-circle.jpg" width="179" height="134" usemap="#FPMap0"></p> 

Step 3: Add the Image/Code to Your Blog

The last step is the easiest. You just create a widget with the code for the image map and the actual graphic.

1. Go to Wp.org or Blogger dashboard. Add a html widget. Paste the code you saved in Step 2.
2. Upload the jpg image from Step 1 to an online service like Photobucket, or directly to your media files or a temporary Blogger post. Save the image location address.
3. Change the last statement in the Step 2 code to show the actual url of your image. In our case, it's
   "http://bloggingwithsuccess.net/wp-content/uploads/2009/12/sample-circle.jpg"
4. Preview and save. Verify that all the hot spots bring up the pages you expect. This is our sample with links activated:
   
   

   Hot Spots Activated

Notes: Additions and Alternatives

Provide alt text for people using text only browsers

You can also edit the image map html to add "alt" tags on each clickable region. Doing so helps anyone who doesn't see the image, by providing text hints. Place the tag at the end of the the hot link addresses, leaving a space. For example,

...category/content" alt="create your blog"

Online services which provide image mapping only

I did find a couple of free online image mapping sites for getting most of what you need in Step 2. This may be a good alternative for getting the specific map coordinates. Then use the format from FrontPage to add your links and name your image map.  The online service may require more effort but, hey it's free.

• Image Maps -Seems easy to use. They gave coordinates of 51, 68, 168, 90 for 'grow your blog', which was very close to what I drew in FrontPage:     47, 73, 170, 93
• Image Map Editor - adds credit line to the code.

Be creative and don't forget to come back to leave a comment about your experience with this technique. Add any other ideas for using image maps.