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: 27437
  • 6 Comments
  • 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 Image-maps.com.

How Is It Done?
When you go to Image-maps.com, 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.

image-maps-upload


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 image-maps.com, 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.

image-maps-url

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.

image-maps-mapping

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 Image-maps.com 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?

Comments

  • 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. Image-maps.com 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:

    http://www.destinationsmobility.com (a Joomla site)
    http://www.art101.com (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:
    http://www.buildajoomlawebsite.com/joomla-developers

    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.
    http://community.joomla.org/user-groups.html

    Hope that helps.

Leave your comment

Guest Thursday, 24 April 2014