Free Image Mapping

An image map is some HTML code which overlays an image and allows different parts of the image to link to different web pages.

This is the diagram we use to explain our Year 8 Research and Technology course and it’s associated professional learning for teachers, iLearn2.  I thought it was a good one to use to test out by linking each section of the diagram to a page of the website we created for a recent presentation.  Let’s see if it works…

iLearn2 PD iResearch iCreate iCollaborate iConnect Image Map

Click on any part of the image and it takes you to the appropriate web page! AND it was easy to do AND it worked first time.

How to use

  1. Upload the image you want to use somewhere – Flickr, Google Drive (make it public), or any free image host – I used Flickr today
  2. Go to
  3. Past the image URL into the box “From a URL”
  4. Click the “Start Mapping Your Image” button
  5. Wait a few seconds and then click on the hyperlink “Continue to Next Step”
  6. Choose the “Rectangle” or “Custom Shape” button
  7. Rectangle Button – just drag the white box in place over the part of the image you want to make a link (in my case iLearn2)
  8. Paste the URL of the page you want to link to into the “Link for this Map”
  9. Save
  10. Custom Shape Button – click where you would have a corner of the shape – I just followed each coloured shape around and clicked where there was a corner (you do not have to join the first and last dots)
  11. Add the URL.  Save
  12. Repeat for each map
  13. When you are done – Click “Get your code”
  14. Buttons across the top: HTML Output – lets you see that it works; HTML Code – copy the code between <div> and </div>. (Advanced users have CSS options as well but it worked just fine without them)
  15. Go you your blog, website, Moodle page, whatever online document you are using and switch to the HTML view
  16. Paste the code where you want the image map.
  17. Publish
  18. Ta Da



About Anita Garnsworthy

eLearning Coordinator at a Secondary Girls College. Passionate about improving pedagogy and empowering students to become independent learners. Relationship > Pedagogy > Technology @Annitix
This entry was posted in link and tagged , . Bookmark the permalink.

One Response to Free Image Mapping

  1. Pingback: Code Like a Googler | doug --- off the record

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s