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.
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.
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 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.