Hello again everyone! Right off the bat, I’d like you to check out a diagram of a computer that I have designed. Be sure to hover over everything and click on all the different parts of the computer. Okay, are you ready?!
To view it, just click here.
Did you notice that when you clicked on a computer part, a tip regarding that piece of hardware appeared? Pretty cool, huh?! So, can you think of a way you could use that on your own Web site? Well, that diagram is called an image map and it’s called that, because it is an image with the different areas mapped out to different links on the Web. And today, I’m going to show you how you can create one for your very own Web site. Let’s begin!
1.) First, you need to decide which image you would like to map out. You might already have one in mind, but I recommend mapping an image that is part of a menu, at least to get you started. Or, you might want to make a diagram like I did. Either way, you decide, because it’s your map!
2.) Next, you are going to have to put the image on the Internet and obtain the URL. Your Web provider should have an upload service that you can use for this. Also, it’s important that you have a copy of the image saved on your hard drive for later use.
3.) We’re going to be using a utility to help us called the Handy Image Mapper. It can be downloaded for free right here.
4.) Once you’ve downloaded and installed the file, open it up.
5.) Your screen will look similar to this:
6.) Select the Open button ( ) and a new dialogue box will appear. Find and double click on the image on your desktop.
It will appear on the right side of the window.
7.) Now, it’s time to begin mapping! On the toolbar, these buttons are the Shape buttons:
They give you the shapes you can use for your map. Go ahead and select the first area you want to map. I used the square tool to map out the computer monitor for mine.
8.) Once you have selected an area, you need to define it on the right.
You will notice how the coordinates have been filled in. The area where it says HREF is where the link belongs. You can either type in your site link or go on the Internet and copy and paste the URL. Finally, ToolTip is the text you’ll see when you hover over an area.
9.) Once you have finished that, select another shape tool and repeat steps seven and eight, until you have mapped your whole image.
10.) Now, select , which means you have the HTML code on your clipboard. You just need to alter it a tad bit and you can use Notepad to do that.
11.) Hit Start, followed by All Programs, then Accessories and and then click on Notepad.
12.) Paste (Ctrl + V) in the code. You’ll then see a local address at the end of the code.
13.) You’re going to have to replace that with the URL of the image on the Internet. After you’ve done that, select all of the code (Ctrl + A) and copy it.
14.) You now have the HTML code you need on your clipboard. Now, just paste it on to your Web site and you’re good to go!
Image maps are a cool and entertaining way to have visitors navigate your site or the Web. Enjoy yours!
~ Neil Patel