[Update]: The website that this tutorial refers to has changed and is no longer offering free image map creation. I’m so sorry about that! I will keep you posted if I find a suitable alternative.
I frequently create collages of images (see here) and I’ve discovered an easy way to make a clickable image map so that it’s easier for the user to figure out how to navigate to the webpage of the item being displayed. The best part is that there’s no fancy software you need to buy. Everything you need is available online for free! Here is a step-by-step tutorial. 🙂
1. To start off, you’ll want to upload the image you want to use for your image map. I use Flickr, so I’m getting the url for the image here (there are numerous other free image hosting sites you can use — photobucket is another good one!). Make sure the url ends in a picture extension format like .jpg or .png.
2. Now go to http://image-maps.com and enter in the url of your picture and click the button to Start Mapping Your Image.
3. After a 10-second wait, you’ll be directed to a page where you can set the clickable areas of your image. I use the Rectangle shape but Custom Shapes are also available.
4. Create your shape. Fill in the url and a description that will be linked to the image. The description will appear at the bottom of the image, but there’s an option on the right toolbar to hide this feature. (I’m linking in an affiliate Shopstyle url below and have a separate tutorial on creating those if you’re interested!)
5. Once your shapes are drawn, select Get Your Code.
6. Optional: Select the HTML code tab and perform any additional customizations.
Here I remove the “Image Map” advertising backlink.
Also add breaklines to separate out the description text into rows
7. Verify that the output looks correct.
8. Click back to the HTML Code tab and select Compress Code.
9. Then just copy/paste to your blog and you’re done!
I hope this was helpful. Please let me know if you have any questions about creating your own clickable image map!
For additional blogging tips, check here. Thank you for reading!
P.S. In case you missed it:
- Merlot Moto + Red Pumps – An easy look featuring a wine-inspired moto jacket and suede red pumps!
Yeah, I jus noticed that too when you mentioned it. Oh well, there's always the text link below.
This is really helpful. I didn't know about this before. It'll be great for us bloggers. Thanks!
http://tia-cherie.blogspot.com
I saw a llot of website but I think this one contains something special in it.
This was so helpful!!!! Thanks for breaking it down. haha It was frustrating to learn but now I think I’ve got it thanks to you! Thanks again!
Danielle | AccordingtoD.com
I ᥙsed to be able to find good information from your blog articles.
This is my first time visit at here and i am in fact
happy to read everthing at single place.
The Princess Diana Philadelphia Jacket, with its team spirit and patriotic colors, echoed the Princess’s commitment to bringing people together. In a world where fashion can be exclusive, Diana used her style to bridge gaps and connect with diverse communities.