If you’ve ever wanted to create image maps for your web pages, you can do so in a variety of ways. One approach is to do so manually, though that could be quite time-consuming. A better way is to make use of software to help you, whether that’s a standalone application or an option that’s a part of a larger application.
An image map could be a simple as a grid with clickable hot spots or it could be as complicated as setting regions on a map, which would make use of multiple shapes. Each clickable section will then take you to a different web page.
For this article I’m going to make use of a couple of programs, one relatively inexpensive ($15.00) and the other, free. The programs I’m using are Mapedit and
CSS Image Map Generator.
mapeditdefault.png
When you open Mapedit, you see the following screen, where you can add an image map to an existing web page or add hot spots to an existing image. In this case, we’ll choose the open an image option.
definingareas.png
As you can see in this screen shot, I’ve made use of the polygon option and once I did so, it brought up the Object URL dialog which allows you to set the web page, target, and more. When you’re satisfied with your settings, click on OK.
tools.png
For mapping an image, your options are: Rectangle, circle, polygon, magic wand and test and edit hotspots. If you make a mistake, clicking on the Esc key will delete the process. Of the drawing tools, I found the rectangle and polygon tools to be the best. The circle tool draws from a center position, so unless your area is near, or perfectly circular, I wouldn’t recommend using it. The magic wand tool works, but it’s really unpredictable and I recommend avoiding it.
testandedithotspots.png
When you draw out a shape, you can make use of the test and edit hotspots tool to change the settings. To do so, click on the Test and Edit Hotspots tool, then click on the shape you want to edit. Note the change in the image, allowing you to edit the points around the image.
rightclick.png
If you want to change any of the Objet URL settings, right-click on the image and this brings up the dialog box you see above.
editsettings.png
Next, click on the Properties heading. This brings up the Object URL dialog box again and you can edit the settings.
When you’ve finshed your map, save the file. Here’s the resulting code:
HTML fragment showing only the elements
relevant to your imagemap: img, map, area, and
/map. Copy and paste the entire map…/map block
into the body of your page. Copy and paste the provided
img element, OR set a usemap attribute as shown on your own
img element.
In Mapedit you’re given up to 100 saving options before you have to buy the software Overall, Mapedit is an easy program to use and will probably do the trick, but if you want more detailed mapping, I recommend Adobe Dreamweaver for that.
Here’s one more example, using CSS Image Map Generator, a free web based program. The first step is to upload the image, then switch to the Visual Editor tab, which allows you to add hotspsots to your layout. Note that this tool only allows you add rectangles, so it’s not as flexible as some of the other programs.
After adding your hotspots you can check out your hotspots with the the Preview tab, which will show the hotspots. Whatever you do, don’t click on it or it will take you to your destination and when you return, to the program, all of your settings will be wiped out and you’ll have to start over.
When you’re satisfied with your changes, click on the Generated Code tab and copy the code.
That’s it.
Standalone Image Map Generator Programs
cssimagemapgenerator.png
onlineimagemaptool.png
• Basic Online Image Mapping Tool
mapedit.png
• Mapedit. With this application you open a page, then draw rectangles, polygons, etc. Zooming tools makes it easier to work with large images. This program is $15.00 and you can try it free for 30 days. I allows you to add an image map to an already existing web page or to work with an image and create an image map.
In the section below are three paid programs which allow you to create image maps as part of the user interface.
imageslicinginphotoshop.png
• Adobe Photoshop. In Adobe Photoshop you can cut an image apart using slices. As with other programs you can assign different URL’s to each slice. Photoshop saves each slice as a separate file and generates the HTML or CSS necessary to display the image.
corelphotopaintx6.png
• Corel PHOTO-PAINT X6. In previous articles I’ve made use of the image slicing feature in PHOTO-PAINT, which allows you to cut up an image into sections. These sections can then be used as hot spots that link to other pages. In the screen shot above, auto slice has been enabled, which sliced the page into sections that you can edit later.
Each slice can be individually named with a URL, target, compression format and more. This program makes use of images, HTML and JavaScript, but no CSS.
• Adobe Dreamweaver CS6. Here’s more information about how to create image maps.
Conclusion.
As you can see, there are many options for creating image maps. If you need something simple you can go that way or make use of some of the paid programs, such as Photoshop or Dreamweaver which will give you more options and flexibility.
About the Author:
<<<<< Nathan Segal >>>>>
Want to build a lucrative career as a freelance writer? <a href=”http://freedomfreelancewriting.com/” target=”_blank”>Get this FREE report</a> and find out what you need to know to succeed.
Nathan Segal has been working as a Freelance Writer for 14 years. In that time, he has written 527 articles and published six books.
His articles been published in many popular magazines, including: <em>CE Tips (Consumer Electronics), Computer Graphics World, Database Journal, Mac Design, Photoshop User, Rangefinder, Smart Computing, The Computer Paper, Streaming Media World</em> and <em>Windows Expert</em>.
He worked as an Associate Editor at <em>WebReference.com</em> for five years. He also wrote several feature columns on 3D and video tutorials.
His books are: <em>The Photoshop Companion, How to Speed up Your Computer: In 30 Minutes or Less, Professional Photographic MS Word Templates, The Corel PHOTO-PAINT X4 Insider, Secrets of Profitable Freelance Writing</em> and <em>How to Position Yourself As An Expert In Any Industry.</em>
