Tip #4048 - Image Maps
Printer Friendly Version | E-Mail This Tip
Image
Maps
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
Want To Comment On This Tip? Click Here! We'd love to hear from you :-)
Like These Tips? Get 'Em Free In Your E-mail
