Hotspots on a Graphic – What are they, How to and Why

Multiple LinksCan you have more than one link attached to a single graphic?  Have you ever wondered how website designers do that?  This is called layering or “Hotspots“.  You can easily create multiple links to any single graphic by doing the following.  I like to use photos or graphics that are in .jpg formats.  My earlier post shows a sample of using “Hotspots” over a graphic image.  It was created in Microsoft Frontpage.  I know other HTML editors can do the same.

Here’s what you do.  Send $14.99 in a self addressed stamped envelope…  (just kidding..I couldn’t resist)

Creating or getting your Graphic / Image

You can:

  • Use Images
  • Use Clipart
  • Use Photographs
  • Use Captured Screen Images
  • Use Scanned Images or Pictures etc.

Make sure you save your file in a .jpg or .jpeg format.  These tend to be smaller files and take less time to load.

Using Frontpage or Expression Web:

  1. In your Frontpage or other HTML Editor, Open a new HTML file
  2. Import your image (graphic), onto the page
  3. Resize and set your image, exactly where, and how you want it to appear
    *TIP (once you create hot spots, you can’t go back and resize or move)
  4. Click on graphic (photo), select the Hotspot Icon from your toolbar (see below)
    (this is called a Polygonal Hotspot Tool)
    Hot Spots in HTML
  5. Now use this tool to draw and outline any object as a Hotspot in your graphic or photo
  6. Once you complete an outline of the object, a box opens up, and allows you to create your link(s)

Hot Spot Links
You can link to pages within your own domain, link to others websites and pages, link to email addresses, and you can even link to documents and .PDF files at long as they are sitting on a server out on the web.

7.   Now just type in the URL, or the HTML page, or email you want linked to this Hotspot on your image
8.   Repeat steps 4 thru 6 for additional areas on your image to be used as Hotspots
9.   Save your html page which now includes your graphic’s Hotspot, and you’re ready to go

Brad Andersohn Property Photo

Imagine what you could do in just a few minutes with your clients photos of their home.  Use your creativity to impress a seller with an Inter-Active demo of their listing photos.  Link the front door to a Virtual Tour etc.  This is  exciting technology.  You will need a website or server to host your final image, which I know most of you already have.

This is the easiest way to create “Hotspots” that are guaranteed to get you some sticky viewers, add a little WOW factor to any image, really impress your sellers, buyers and investors, and it only takes a couple minutes to do.  I hope this post is of value to you and your business.  It sure has been to mine.


Leave a comment