Tech Tips Home
The Best Tech Tips And Daily Deals
Newsletter On The Internet!

Shop online 24hrs a day or call us Mon-Fri
8:30AM-4:30PM EST - 1-800-915-2088
WorldStart Tech Tip And Store Search
Email: Password: Login Remember Me

Like what you see here? Subscribe to the Tech Tips newsletter!   Email: Subscribe

Image Maps

Friday, August 10th, 2007 by | Filed Under: Uncategorized
 
Loading...


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

Leave a Reply


Like these tips? Get them for FREE in your email!

WorldStart's Tech Tips Newsletter

  • Tech Tips Daily - Become a tech pro! Get the very best tech and computer help sent directly to your email every weekday!

  • Tech Tips Weekly - If you don't want our Tech Tips newsletter every day, then sign up for this weekly newsletter to get the best information of the week. Sent on Fridays.

Other Newsletters

  • WorldStart's Daily Deals - Every week, we send out great deals in our Daily Deals newsletter. Many of these deals are exclusively for our Daily Deals newsletter subscribers and can't be found with our regular specials.

  • Just For Grins - Each issue includes a couple clean jokes, some funny quotes, and a hilarious reader's story. Newsletter is sent five days a week.


Enter Email Address:

Subscribe

Your e-mail address is safe with us!
We only use it to send you the newsletters you request. It is NEVER disclosed to a third party for any reason, ever! Plus, if you decided you don't like our newsletters (don't worry, you'll love them), unsubscribing is fast and easy.

Free Newsletter Signup



Tech Tips Daily

Become a tech pro! Get the very best tech and computer help sent directly to your email every weekday!

Tech Tips Weekly

The week's best in tech and computer help. Get your issue sent to your email every Friday!

WorldStart's Daily Deals

The very best deals on the Internet! Get a new set of incredible sales every day of the week!

Just For Grins

Clean jokes, funny quotes, and hilarious comics. Sent 5 times a week straight to your email.


Subscribe


Love Worldstart? Refer A Friend!

WorldStart's Premium Membership

Tip Archive


Categories:
Archives: