Creating Hotspot Links on Pictures

This is an example of an online office, but as you can see… I’ve stepped away.

The image below is loaded with links and labels which will provide you access to the stuff that I think you might need or at least be interested in while I’m out.  Go ahead and feel free to click around on the picture, and if you’re interested in learning how to do this yourself… just continue reading.

There are 28 different links in this picture, can you find them all?

Real Estate Video RainMaker Graduate Real Estate 411 Info & Netwok Agent Assist Goal Planner Listen To The Music All the Bread Crumbs on the Web ActiveRain Puddles Real Estate Tech World Check Out These Digs! Contact Me Get The Entire Feed Here What's In Here? Hmm... DebraLee Darling & Her Brad Habit Armored Flight The Heartbeat Band Cool Pin Boards Free Training & Support Calendar Photos, Images, & Graphics Library Visit My Other Office The Internetarian & Web Concierge REALTOOLS for REALTORS Wine Valley Reviews San Francisco Bay Area Real Estate Information FaceBook Twitter LinkedIN YouTube Who's Office Is This?  Let Me Google That For You... Image Map

So, how do you add these “Labels” and “Links” on YOUR images, graphics, and pictures? Let me show you.

They are called “hotspots” (or image mapping) and can be added to any pictures, images, and graphics of your choice using a variety of different software applications and programs.  For the picture above, I used SnagIt by TechSmith.  For this tutorial, I’ll make it even easier by using an online tool called Image-Maps.

No software, no downloads, and it’s free.

1. Go to Image-Maps.com and upload any image
2. Select the area on the image using the selector tool
3. Place the “hotspot” where you want the link to be
4. Add the URL (hyper-link) and label for the hotspot
5. Then save the image and grab the embed code
6. Copy and Paste the embed code on any HTML page

Hotspots on Images

Final Important note: Once you create and complete your hotspot image with all the links, you’ll want to host the original picture you’ve uploaded to the Image-Maps server somewhere else.  The site owner deletes your pic after 24hrs.  You can host it on Photobucket, Flickr, Picasa, on your own server/space at GoDaddy etc. 

Just replace the image-map URL in the HTML code with the URL where your image will now be hosted.

html change

Now this may seem complicated at first glance, but it’s not.  In literally minutes, you’ll have an awesome picture or graphic with valuable links all over it for your clients and prospects.  Just take a moment and think of the many possibilities and the variety of ways you could be using something like this:

IE: Banners, Headers, Footers, Email Signatures, Home and Office Tours, and that’s just the beginning…

What about these ideas for some uses:

  • Layouts with Facebook, Multiply, and hundreds of other social networking sites
  • Blog and web site headers and navigational bars or sitemaps
  • Website applications like advertisements and forum signatures
  • Navigational features like schematics, floor plans, blue prints, diagrams and flow charts
  • City, County, and Country maps.  Also click-able store locators and more

Here’s the online “image-mapper” go ahead and try it, it’s free. If you prefer software to do this, get a free copy of iMapBuilder and give it a shot… I mean “spot” lol~ You can also purchase SnagIt which is really inexpensive if you want the additional features they offer.  I use it frequently on my images, screenshots, graphic,s and pics.

Here’s a quick video showing how easy it is to image map without using software


There are a few additional HTML tricks and tips that can be useful for getting the most out of this tool and process, (like centering and targeting) and I’d be happy to share those with you too. But this should get you started and well on your way to creating some awesome graphics and pictures with hotspots, labels, and links built into them.

Comments (9)

  1. keith hallquist

    Brad,
    You spoke of ” getting the most out of this tool and process, (like centering and targeting)).” What exactly is meant by “centering and targeting”? A link to anything you or someone else had to say about this would be appreciated.
    I need to put drag drop zones/spots into various spots on a blank are of the screen or in an image. E.g., drop zones for students to drag geographical objects to, from resting place along the screen border, to build up a geographical map of a state or country. Thereby to learn geography.

    Keith

Leave a Reply to Dagny Eason Cancel reply