Wednesday, May 4, 2011

How to add hotspot links to your pictures!

If you want to put links on a picture or make your own personal navigation list, here's how you do it.

Of course, first thing is first: have the image ready to go saved as jpeg or png is probably the easiest (though other file types work as well). You will need an image url in order to move onto adding links so use an image hosting website such as flickr or photobucket to upload your image(s). I love photobucket; it's very easy and making an account is free but any other site is fine.

Now, although there are plenty of programs you can download and whatnot to "hotspot" your image, you can find programs online that you can use conveniently without any downloading. I use Image Mapper ISDN*tek but others you come across probably work just as efficiently. Again, whatever is easier for you to use!

Now, go on ahead and follow the directions there to add links to your image. It's very easy. You just paste in your url for the given image and add links on by one.You can have your entire image link to one place like your facebook fanpage or online shop or you can have multiple links on one image by tagging the areas one by one.

Okay, once you have made all your hotspots, preview it and if everything looks good, copy the html coding the site made for you. For blogger, you would want to go to "dashboard", then "design" and figure out which section of your blog you want the image to show up in. For example, I want most of my linked pictures in the sidebar so I would add a "text" section on the right or left and press the "edit html" tab above the text box to the right before pasting (otherwise your entire coding will show up rather than your picture). When you press the "rich text" tab after you have pasted the code, your image should show up. Then save and see how the links work!

For blogger, even on preview mode, the links for whatever reason won't work on hover unless you save the changes and just press "view blog". If there are any errors in spelling that you made during hotspot coding, you can go back to the text section, press "html edit" and look through for the particular link(s) and correct them. Easy. :)

Leave any comments, suggestions, or problems you have found below as a comment. Maybe we can help each other out!

Photobucket Photobucket


  1. I'll have to try this. I'll absolutely have your instructions up for guidance. Thanks for going through the trouble to explain everything so well! ;)

  2. No prob! I'm glad I can help. And if you have any questions along the way, feel free to ask!


All thoughtful comments are appreciated. :) Thanks for being here!

Blog Design by Caked Designs