Skip to main content

Using image maps to create attractive course menus in Moodle

Since I had a very good response to my previous post about creating dynamic reading lists in a VLE course page, I thought it might be worth following up with another little thing which I have just been working on: Image-mapped menus.  An image map, in case you don't know, is a picture in which there are certain areas which act as 'hotspots', and can take you to different links.  It can be a rather neat way of just making your own course stand out a little, and of making it perhaps even a little more fun to use for students who may well be getting bored of standardised and often rather dull templates.

There are some specialist tools, which do this job very well - but they are not always the easiest to work out.  More recently, I have starting using a free online resource called - which frankly makes the whole thing as simple as it can get.

To begin with, when building a VLE course I know that there are certain sections which students will need to have quick and direct access to.  For me, these are:

  • Contact details
  • Reading lists
  • Assessments
  • Forums
  • Course evaluations
  • Lectures

I first need to find or create an image which fits the course itself.  For example, this semester I am teaching ye olde Shakespeare course - so I have been looking for a picture related to Shakespeare.  The image itself needs to be one around which, or within which, you can include the text of your sections in a way which is clearly visible.  For me, I found this rather nice drawing of the Globe, with handwriting around the outside which gives it a suitable antiquated feel, while at the same time suggesting some sort of measuring or analysis of the history it is depicting:

For some reason, I could only see this image in Google preview so cannot add the attribution at this point - but normally I would include this in a caption.  I will add this later once I have found it!

I now need to tailor this image to my needs.  A very simple way of doing this would be to open the image in a basic image editing programme like Microsoft Paint.  I can then use the Text option to add text over the image:

This is fine, but notice that my default type font (Arial) does seem rather mismatched against the handwriting elsewhere in the image.  I could reduce this jarring effect by finding a font which fits better the tone of the image - a handwriting font.  Fortunately, there are countless free fonts out there which could suit the purpose.  Simply type 'free handwriting fonts' into Google and you will see sites like fontspace, 101fonts or dafont will doubtless show up with thousands of options which you can simply download, open and click on 'Install'.  For example, typing in 'Shakespeare Font' brings up some interesting options such as this:

A lovely font - but actually, it doesn't quite fit my image on this occasion, so instead I have gone for JoeHand2, which I have downloaded (sometimes you are invited to make a small voluntary contribution of you are using the font - which is always a nice thing to do), and installed by clicking on the button:

Now I can start to add my text to the image.  Using something like Microsoft Paint is easy, free and can producing surprisingly good results.  If you wanted, though, to go a bit further - but didn't want to have to fork out the cash for an expensive graphics program like Photoshop, then GIMP is an excellent free alternative.  GIMP works pretty much in the same way as Photoshop, but is opensource and therefore free to download for Windows, Apple or its native Linux.  The additional options a programme like this brings, is some sophisticated tools for manipulating existing images and text.

For my example (and with apologies to the original artist), I have taken the liberty of using the 'clone' stamp to delete the original writing without losing the texture of the background.  This will help my headers stand out more clearly.  I have also used one or two of the filters - such as 'coffee stain' - not for any particular reason but because it is fun to play around with filters!  The end result looks like this:

You might want to change the size of the image at this stage - the image will by default show at 100%, which is often too big for the VLE area.  You can change the size of the shape in MS Paint by using the 'Resize' option.  If using GIMP, you can do this a little more accurate by using 'Scale'.  I generally stick to about 500px width, but if it looks the right size on the screen, then it is probably going to be fine.

Now, with my image nicely ready and saved, I can go to image-map and using the browse button upload my image:

When done, click on 'Start mapping your image', and after waiting a few seconds you will be able to 'continue' and progress to the mapping page:

An imporant thing to remember at this point is that there is no option here for backing up your progress.  If you refresh the page, or put your computer to sleep, you will probably lose your progress - so if you are not sure about things to begin with then it is best to start simple.  And make sure you have a stable internet connection!

Before beginning the mapping, it is worth looking at the option you have:

Once you have set your preferences, you can start to map your image.  Because the headers in my example are not regularly shaped, I will be using the 'Custom Shape' option.  I click the button, and then map out pathway points to outline the shape I want to make into a hotspot:

When this is done, I can paste the url (web address) of the link I want to connect with this hotspot.  I will paste this over the '' text.  I can give my link a title, and even use the 'Test Link' button to check that it is taking me to the right location.

Of course, for this to work you do need to have a location to send your students to.  For this, you may need to go back to your VLE course page.  One of the best ways to use image maps effectively is to make sure that you they are linking to is constant.  If you delete it, then the image map will no longer work.  Personally I find the best way of doing this is, rather than linking to uploaded files, is to create a 'Page' - which is a black document in which I can create links to uploaded files:

This illustration comes from a Moodle course, but doubtless there is a similar option in Blackboard-based VLEs.  In this instance, I have created a Page called 'Reading'.  I have not added the content to the page - I can do that later, since all I really need now is the link to the page itself.

If you wanted to create a link to a content area, then the button to look for is the one which means that only that content area is open.  For me, this button appears in the top-left corner of each content area:

This button here is telling me that clicking on it will mean that only this topic is showing.  Using the right-hand button on the mouse will bring up a context menu, from which I can copy the link which would open only this topic.  In Firefox browsers this option is called 'Copy Link Location'.  Chrome users will see 'Copy Link Address' and Internet Explorer users should, frankly, upgrade to a better brower - but if you insist on using the wretched thing then you will see an option called 'Copy Shortcut':

If I am linking to a Page, then I can do the same thing - use the right-hand button to copy the link address, then paste this into the box at image-maps.

Repeat this process for all the sections or headers you want, and after saving them all you should see your content areas with the selection paths showing up around them:

Now, there is one other thing we need to do before finishing.  You will have saved your image somewhere - like your desktop - and uploaded that image to image-maps from there.  We need to locate that image somewhere other than Image Maps (which does not store the images for you).  This means you need to upload your image to your VLE course (it can be in a hidden content area) and again find the 'Link Location' or shortcut address.

If you have done this, then you can finally click on the 'Get code' button in Image Maps, and you will then be taken to a page with a number of tabs at the top.  The one you want is 'html code':

This will show you the code itself.  At this point we need to make a change.  If you look carefully at the code, you will see in there somehwere are url link to your image - I have underlined it in the image above.  You need to delete this address, and replace it with the link to the image in your VLE course page.

And that's pretty much it!  Go back to your VLE page, and create or edit the area where you want the image map to appear.  Make sure you switch the view to 'html'...

...and paste your code into it.  Save and close, and that's it.  You have a rather nice image map menu for your course that makes your course just that little bit distinct from more generic forms, and can possibly make the experience of using the course just a little bit more attractive:

Popular posts from this blog

2) Introduction to morphemes

So does language begin with words?

No. Language begins with sounds. It is important to understand this first and foremost. We have already raised this point, but it is worth raising again – language begins with sounds!

If I appear to be emphasizing this with a rather bizarre desperation, it is because it would be easy to think that since we are beginning our exploration of language and linguistics with words that this is where language begins. When you think about it logically though, all words are composed of various sounds grouped together. The word ‘cat’ is composed of three distinct sounds - /c/, /a/ and /t/.

So why aren’t we starting with looking at how sounds create language?

Well, in the not-too-distant past, when European football used to be free on the telly, Manchester United or Arsenal would jet off to Spain for a titanic contest with Barcelona. When the commentators referred to Barcelona, they would pronounce it ‘Bar-se-low-nah’ (bɑ:sɜ:ləʊnæ). After a few years th…

A fond farewell

Every time a new term starts, I find myself wondering what the hell happened to the supposed weeks inbetween?  We leap from teaching, to marking, to assessment boards to enrolments - and after all that, BANG!  Back in the classroom!  At which point we often start wishing there had been at least some time to prepare our classes...

But things have been rather different this time.  About a three months ago I was (admittedly to my own surprise) considered worthy enough to be offered an incredibly exciting job with the Centre for Excellence in Learning and Teaching (CELT) and the University of East London.  The regular whirlwind of activity over the Summer then, is having something of a more terminal period: Teaching, marking, assessment boards, enrolments and BANG! I'm walking out of Newham College for the last time!

It is now almost exactly 10 years since I joined Newham College.  The plan then was, at heart, very simple: The residents of Newham Borough represented a vast population …

Moodle looks rubbish: The myth that may be costing HE institutions

It was interesting, but not entirely surprising to read Phil Hill's blog on e-Literate suggesting a dramatic slow-down in the take-up of Moodle in HE Institutions.  Not surprising because there seems to be a myth about Moodle that has always flickered in dark corners and is fanned into flame by for-profit LMS providers at the nearest opportunity.

This myth is that Moodle looks rubbish.

Other LMS providers set up a course content page filled with as many html5 gadgets as they can imagine, and compare it to the most basic topic-format Moodle page.  "There we are!" they declare, "Look how rubbish Moodle looks compared to our system!  And in the modern world where students are using tablets and mobile phones more and more, isn't it important that your University LMS looks smart and contemporary?"

And so Universities look at these other LMS systems and think: 'Ooo, it has this, or it has that!  Our Moodle doesn't have them!'  Which in turn prompts a…