Joomla Blog

Tutorials, reviews, case studies and other tips to help website owners and website developers master the Joomla content management system.

Going Old School with Image Maps in Joomla

Posted by on in Tutorial
  • Font size: Larger Smaller
  • Hits: 54354
  • Subscribe to this entry
  • Print

With the development of technologies such as HTML 5 and CSS 3, the focus of many web designers has moved away from navigational elements like image maps. One of the main reasons for this switch in focus is responsive design. As we start to think "mobile first" in the way we design for an ever mobile audience, it becomes clear that the old way of linking pages to large images with small type will not work.

However, with some very good planning and font selection, image maps can work quite well across browsers and devices. The main issue is then, "How do we make an image map work in Joomla?" Turns out, it's pretty easy. Here's how we did it.

What Is An Image Map?
An image map is simply a regular jpg, gif or png image on a web page that has some code associated with it to make certain parts of the screen clickable. Those areas are normally laid out with common shapes, such as rectangles or circles; however, you can use any shape you'd like. The image map code is included somewhere in the body section of the HTML and linked to the image itself through the img tag.

It is possible to create this code by hand, and we've heard that there have been Extensions attempted for Joomla, but I recommend using an online image map creator like

How Is It Done?
When you go to, you will see a web page that actually looks like it was created during the height of image map popularity. Not exactly beautiful, but it's quite easy to use. Simply upload an image from your computer or even link to one online and click "Start Mapping Your Image" to begin creating your hot spots.


When you get to the image mapping screen, change the Base URL to your actual domain where your new image map will live. If you don't mind having a link back to, you can leave Allow Backlink checked. If you'd rather not have that extra code or link referring back, go ahead and uncheck the box, but remember that this is a free tool that someone worked on for many hours. If you do uncheck the box, consider using the Donate button to buy the developer a beer...or coffee...or pizza.


Once you've set your Base URL, you can start mapping. Click the rectangle button just above the Advance Tool Box, and start drawing shapes where you would like your image to be clickable. You can drag the size, shape and placement of the rectangle to fit the area you're mapping. Once you've placed your link and optional Title / Alt for the map, you can test the link and then save it.


Do this for each area you want clickable, and when you're done click "Get Your Code" just above the Advance Tool Box area. You'll then be taken to a page with several tabs at the top. Click the HTML Code tab and copy the code in the window.

Putting It Into Joomla
The last few steps involved will get the image and the code into a Joomla Article. First, simply upload your image through Media Manager or your prefered method and take note of the location of your image. Then, create a new Article.

It's important to make sure your editor is set up to allow code in the Article. There's a bit of info on modifying these editor properties in our article on inserting Wufoo Forms into Joomla.

Go into the code or HTML view of the Article and paste the code from into the window. Replace the src="/" field with the correct location of your image. Save, close and create a Menu Item linking to your new Article. You should now have a working image map in your Joomla website.

Remember to think very carefully about how your image map will look across devices and the size of the font you use in your images. With careful planning and a conservative use of this "old school" method, you can make your images clickable again. And with the explosion in popularity of Infographics, image mapping may come back a bit too.

Find this helpful or entertaining? Think image maps are simply outdated and useless? Let us know in the comments below if you successfully create some of your own image maps or have some constructive but differing views on the subject.

Rate this blog entry:
Build A Joomla Website writer and moderator, lover of CSS...waiting for hockey season to start again.

- Is responsive web design all it's cracked up to be?


  • Sue
    Sue Friday, 19 April 2013

    Thanks so much Rob for this blog. I was taught to make image maps when I learnt HTML... and actually coded some sites completely then (not that well I may add) in notepad. Also in those days I think it was the only way (before Google Places) to actually pinpoint where some point of interest was on a map. I have thought once or twice how nice it would be to be able to use something like this in Joomla... and had the idea once to use an image of the inside of a toy shop and use image maps on different types of toys to link to the product pages on the website. I had no idea how to do this though. As usuall you have come up trumps and I'll certainly be having a go at using your instructions.

    Thanks again ... Sue

  • Robert Wilson
    Robert Wilson Saturday, 20 April 2013

    You're very welcome. I'm often surprised how large a percentage of people in the Joomla world seem to come from the "old school" world of web development. Lots of experienced people.

    If you get a good image map built, make sure to share it with us.

    Reply Cancel
  • Guest
    joomla Web Developers Thursday, 9 May 2013

    Hi, rob it's really impressive post for me. Even for my team. Image map is the good in joomla and helpful to me.

  • Pat Vanden Bosche
    Pat Vanden Bosche Monday, 27 May 2013

    I never really worried about image mapping being an issue for a site until I read your post. I have used this tool in the past, then used Sorcerer to embed the code. But with the onslaught of all the various mobile devices (including the iPad I'm using now to add my comments) all the rules have changed. Images have to be easier to see when reduced in size, and hot spots have to be easier to find. Then you also have to consider an alternative link on a page that may eliminate your module position entirely for the sake of spacing. So much to consider! Great topic, and something to keep in mind. These are the kind of issues facing web designers now that weren't around just a year ago!

  • Andy Markley
    Andy Markley Tuesday, 15 October 2013

    Hi Robert, thanks for the tutorial.

    Unfortunately, I cannot report any joy. I've worked the image map mess with Joomla 2.5x for almost three weeks now. Hours of my life melted away trying to do something that should be simple, easy, reliable, and fast. And maybe even fun. felt like a good solution, but generates code that doesn't work.

    Whatever ... I give up. I'm a designer, not a programmer. These days, about 90% of my time with this project is spent messing around trying to make Joomla work for my client. That ratio is whacked and unacceptable.

    Sorry about the rant. Here's what I need: Somebody we can hire to work the Joomla junk while I work design and art. Do you know anybody who might be interested?

    Related links: (a Joomla site) (Art101 Central Command, built with good old trustworthy HTML)

  • Robert Wilson
    Robert Wilson Saturday, 19 October 2013

    Hey Andy,

    Joomla should be a tool to make life easier. In most cases, Joomla is exactly that. However, if you are more comfortable using a different tool...and that tool makes your business life easier and it works well...then go with that tool.

    You can always check out the developers we have in the Developer Listing for some help:

    There are also local Joomla User Groups that provide lots of help finding good developers. Look your local group up and attend a meeting. Good things come of those meetings sometimes.

    Hope that helps.

  • Guest
    J Wilson Tuesday, 25 November 2014

    Yes I use a map in my website - it is literally that - a map of Italy and I need to make areas clickable. And my website is now responsive design. So I cant believe they have left this out in html5 .... so really struggling to find out how to do this. I have worked with computers and interactive computer based learning for 10 years then 6 years developing html code and css etc ! but still struggling !!

  • Guest
    Zag Friday, 13 March 2015

    I'm new to web development and I keep running in to a wall trying to implement my image map. I was able to use image mapper to create my html and copy it to my joomla article. So far so good. But my total novice problem is that the image is resizing within the joomla template, while the coordinates for the image map arent. So none of the hotspots line up with my image.

    Ive read tons of boards on making my image map responsive but they all keep circling back to rwdImageMaps or some other jquery plugin, which Joomla just laughs at.

    What am i doing wrong? All i need is for the image map coordinates to adjust to the source image it is using.

    Don't forget I'm a novice. Any explanation that can be reduced to hand holding would be greatly appreciated.


  • Richard Pearce
    Richard Pearce Monday, 16 March 2015

    Image maps have always been tricky, particularly now we have responsive sites. See if JA Image Hotspot does the job for you. I mention this at

  • Guest
    Zag Monday, 16 March 2015

    Thanks, but I've actually tried JA hotspot as well. For some reason its not taking the PNG images I upload for the custom hotspot markers I want.

    If you have any idea how to resolve that that would be amazing as well. It seems the only real approach is to make the image map itself non-responsive so that the coordinates dont have to be.

Leave your comment

Guest Monday, 24 October 2016