How to Create Clickable Graphics With Image Maps Without a Subscription

Recently a client asked: “Do you know if there is a way around having to register with Image-Maps.com? Do they have a free version that you are aware of?”

Fortunately, there is a way to create functioning Image Maps with no account required.This workaround adds seven extra steps to the process so it’s up to you to decide what’s more valuable – your time or your budget.

Warning: The workaround is not dead simple. I wouldn’t hand these instructions to my Grandma and say “run with it.” You do need to understand the basics of how HTML works, or be able to follow instructions with robot-like precision. For some people, the return on investment to pay for the subscription would far outweigh the extra steps.

Here’s the perks you get if you pay for a subscription ($5-$7/month):

• Ability to host your images on the Image Maps website
• Ability to save multiple maps
• Ability to edit without altering code on your site
• Extra mapping tools including zooming & Image Map code importing
• Access to the original image mapping tool
• Only three simple steps to creating an image map: Upload the image, Map out your links and Get the code.

How to Convert Smart Art Objects into Clickable Graphics without a Image Maps Subscription:

1. Go to Image Maps website: http://www.image-maps.com/

2. Select Browse for File. Select file and select Open.

3. Select Start Mapping button. You’ll see a Loading screen then this message:

4. Ignore the  instructions to signup to save and edit . Click “click to continue”.
Note: You do not need to create an account and login.

5. Right click on the image to get the tools men:

6. Map your hotspots with corresponding URLs:

7. Switch to the Events tab to set the Target Attribute:

Attribute Values:
_blank = Opens the linked document in a new window or tab
_self  = Opens the linked document in the same frame as it was clicked (this is default)
_parent = Opens the linked document in the parent frame
_top = Opens the linked document in the full body of the window

Tip #1: Check out W3Schools.com for more HTML tips.
Tip #2: Here’s some awesome tips to make your mapping easier:

8. Now if you try to right click and Save Map, you’ll get an error warning:

9. To bypass this, right click and select Get Code:

Image Map has generated an awesome chunk of code for us to paste into SharePoint. But first we need to change the part of the code that says the image is stored on the Image Maps website.Why? We want to change the code to point to where the image is stored on our SharePoint site.

10. Fortunately this is easy! On the Map Info tab, there’s a field for “Image Source”. Delete the URL that points to the image-maps site:

11. Then paste in the URL that points to the location where you stored your image:

12. Switch to the HTML Code Tab and scroll down to the bottom of the page:

13. Copy the code in the “HTML Image Map Code” field:

14. Note: There is a teeny tiny warning that states “if you uploaded your image, you must change the image source – all NON HOSTED images will be removed within 24 hours.”
This is not applicable to us as we’re hosting our image in SharePoint, and we’ve changed the part of the code with the image source to point to SharePoint instead of the Image Maps website.

15. Paste the code into Notepad. Look for the part of the code that has the file path to the .png image. Highlight the snippet:

16. Delete this snippet of code:

17.  Copy and paste the URL file path to the location where you stored your image in SharePoint:

You’re now ready to copy the entire piece of code and paste it into the location you want it to show on your SharePoint page.

Here’s instructions on how to insert an Image Map into your SharePoint web page.