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 image-maps.com 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…
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 image-map.com
- Upload the image you want to use somewhere – Flickr, Google Drive (make it public), or any free image host – I used Flickr today
- Go to http://www.image-maps.com/
- Past the image URL into the box “From a URL”
- Click the “Start Mapping Your Image” button
- Wait a few seconds and then click on the hyperlink “Continue to Next Step”
- Choose the “Rectangle” or “Custom Shape” button
- 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)
- Paste the URL of the page you want to link to into the “Link for this Map”
- 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)
- Add the URL. Save
- Repeat for each map
- When you are done – Click “Get your code”
- 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)
- Go you your blog, website, Moodle page, whatever online document you are using and switch to the HTML view
- Paste the code where you want the image map.
- Ta Da